javascript - jquery 设置带图像的背景渐变不适用于 css()

Question

这是有效的

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() 设置它时它似乎不起作用？控制台完全没有错误:

http://jsfiddle.net/xcso27zk/

Answer 1

从 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 次，本质上是在编写无用的代码。