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 + ')'
})

在某些浏览器中，该对象无法像您希望的那样工作。你只需要重写'background-image'4次，基本上是编写无用的代码。

Answer 2

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

而不是

NSString *fileName = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"pdf"];
NSData *pdfData = [NSData dataWithContentsOfFile:fileName];

PFFile *pdfFile = [PFFile fileWithName:fileName data:pdfData];
[pdfFile saveInBackground];

PFObject *testObject = [PFObject objectWithClassName:@"MatchReports"];
testObject[@"file"] = pdfFile;
[testObject saveInBackground];

尝试

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

＆＃13;

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

＆＃13;

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 + ')'
});

＆＃13;

Answer 3

这就是我的操作方式，在FF和Chrome上似乎都可以正常工作。

var img = $(".stall-banner-img").val();
  $(".stall-page-banner").css({
    'background-image': 'linear-gradient(to bottom,rgba(82, 75, 75, 0.5)80%,rgba(34, 32, 32, 0.5)100%), url(' + img + ')'
  });

Answer 4

您正在将多个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 + ')'
});

只有一组括号

jquery设置背景渐变与图像不兼容css（）

4 个答案: