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> 

但是为什么当我尝试使用jsss（）设置它时似乎不起作用？ 控制台中完全没有错误：

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

Answer 2

jQuery的css函数在一次调用中不接受一组对象。

代替

$(...).css({},{},{})

尝试

$(...).css({})
  .css({})
  .css({})

 var img = 'http://i.imgur.com/Hsban3N.jpg'; $('#deco').css({ 'background-image': '-moz-linear-gradient(top,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')' }).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,0.65))), url(' + img + ')' }).css({ 'background-image': '-webkit-linear-gradient(top,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')' }).css({ 'background-image': '-o-linear-gradient(top,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')' }).css({ 'background-image': 'linear-gradient(to bottom,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')' }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="deco">123</div> 

Answer 3

您正在将多个javascript对象传递给css方法，但是它只需要一个具有多个“名称/值”对的javascript对象。 像这样：

$('#deco').css({
    'background-image': '-moz-linear-gradient(top,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')', 
    'background-image': '-webkit-gradient(linear,left top,left bottom,color-stop(80%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.65))), url(' + img + ')', 
    'background-image': 'background-image: -webkit-linear-gradient(top,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')', 
    'background-image': '-o-linear-gradient(top,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')', 
    'background-image': 'linear-gradient(to bottom,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')'
});

只有一套支架