我尝试使用jQuery来切换背景URL。但是当jQuery启动并切换URL时,它会删除-webkit-background-clip:text;
效果。是否可以做一些事情,以便我们可以切换背景图像,但保留剪辑文本效果?
jQuery(function($) {
var whatToSwitch = $('.homepage_overlaytext h1');
var backgrounds = ['url(http://static.jsbin.com/images/jsbin_static.png)', 'url(http://static.jsbin.com/images/popout.png)'];
var current = 0;
function nextBackground() {
whatToSwitch.css(
'background',
backgrounds[current = ++current % backgrounds.length]
);
setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
whatToSwitch.css('background', backgrounds[0]);
});
h1 {
background-size: contain;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_code_inner">
<h3>
Header 3
</h3>
<h1 style="background: url("http://static.jsbin.com/images/popout.png");">
Header 1
</h1>
<p>
Text
</p>
</div>
我尝试了背景和背景图像,但它仍然删除剪辑效果。
1条答案
按热度按时间k5hmc34c1#
在HTML(应用
background
-属性的内联CSS部分)中,使用了background
而不是background-image
,只需更改属性,就可以使用jQuery附加所需的背景图像。