这是有效的
div {
width: 100px;
height: 100px;
background-image:
-webkit-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65) 100%),
url('http://i.imgur.com/Hsban3N.jpg');
}
<div id="deco">123</div>
但为什么当我尝试使用 jquery 的 css() 设置它时它似乎不起作用?控制台完全没有错误:
最佳答案
从 jQuery 1.8.8 开始,它为您添加前缀,因此您只需要输入
$('#deco').css({
'background-image': 'linear-gradient(to bottom, rgba(0,0,0,0) 80%, rgba(0,0,0,.65) 100%), url(' + img + ')'
})
还有。如果你输入这样的东西
$('#deco').css({
'background-image': '-webkit-gradient(linear, left top, left bottom, color-stop(80%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.65))), url(' + img + ')',
'background-image': '-webkit-linear-gradient(top, rgba(0,0,0,0) 80%, rgba(0,0,0,.65) 100%), url(' + img + ')',
'background-image': ' -moz-linear-gradient(top, rgba(0,0,0,0) 80%, rgba(0,0,0,.65) 100%), url(' + img + ')',
'background-image': ' -o-linear-gradient(top, rgba(0,0,0,0) 80%, rgba(0,0,0,.65) 100%), url(' + img + ')',
'background-image': ' linear-gradient(to bottom, rgba(0,0,0,0) 80%, rgba(0,0,0,.65) 100%), url(' + img + ')'
})
该对象在某些浏览器中不会像您希望的那样工作。您将简单地重写“背景图像” 4 次,本质上是在编写无用的代码。
关于javascript - jquery 设置带图像的背景渐变不适用于 css(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30541449/