[英]jquery set background gradient with image doesn't work with css()
This is working 这工作
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>
but why when I try to set it using css() of jquery it doesn't seem working? 但是为什么当我尝试使用jsss()设置它时似乎不起作用? No error in the console at all :
控制台中完全没有错误:
From jQuery 1.8.8 on, it prefixes for you, so all you'll need to type is 从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 + ')'
})
Also. 也。 If you type something like this
如果您输入这样的内容
$('#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 + ')'
})
The object won't work like you desire in some browsers. 在某些浏览器中,该对象将无法正常工作。 You will simply rewrite 'background-image' 4 times, essentially writing useless code.
您只需将“背景图像”重写4次,本质上就是编写无用的代码。
JQuery's css function doesn't accept a set of objects in a single call. jQuery的css函数在一次调用中不接受一组对象。
Instead of 代替
$(...).css({},{},{})
Try 尝试
$(...).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>
You are passing multiple javascript objects to the css
method, but it only takes one javascript object with multiple name-value pairs. 您正在将多个javascript对象传递给
css
方法,但是它只需要一个具有多个“名称/值”对的javascript对象。 So like this: 像这样:
$('#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 + ')'
});
with only one set of brackets 只有一套支架
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.