使用 jQuery 应用 css3 渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6016988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying css3 gradients with jQuery
提问by Dave
Eventually, I wish to dynamically alter gradients based on different things, but how do I get jquery to apply a css3 gradient?
最终，我希望根据不同的事物动态改变渐变，但是如何让 jquery 应用 css3 渐变？
//works
$(element).css("background-image", "url(http://www.google.co.uk/images/logos/ps_logo2.png)");
//doesn't work
$(element).css("background-image","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");
//doesn't work
$(element).css("background-image","-moz-linear-gradient(left center,rgb(194,231,255) 28%,rgb(255,255,255) 28%");
What am I missing? I've also tried
我错过了什么？我也试过
$(element).css({background: "-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255)"});
Are these approaches not valid?
这些方法无效吗？
回答by Dutchie432
Your second approach looks OK... Maybe you need to css styles for non-webkit browsers as well... Cross-Browser CSS Gradient
您的第二种方法看起来不错……也许您还需要为非 webkit 浏览器设置 css 样式……跨浏览器 CSS 渐变
This works for mein Chrome
这在 Chrome 中对我有用
$('#block').css({
background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))"
});
Also have a look at: http://www.colorzilla.com/gradient-editor/
回答by WSimpson
Another optionis to use the jQuery addClass method. This allows you to dynamically add and remove classes and therefore any formatting associated with that class including gradients.
另一种选择是使用 jQuery addClass 方法。这允许您动态添加和删除类以及与该类相关的任何格式，包括渐变。
回答by Puneet Lamba
I'm using the hyphenated syntax in the JSON format (I always use the JSON format to be consistent). And it's working fine in both Chrome and Firefox.
我在 JSON 格式中使用带连字符的语法（为了保持一致，我总是使用 JSON 格式）。它在 Chrome 和 Firefox 中运行良好。
For example:
例如：
$("#googleFeed div:even").css({
'background':'-webkit-linear-gradient(top,white,black)',
});
回答by Sanu Uthaiah Bollera
Here is a small piece of example...
这是一个小例子......
$("p").css({background:'linear-gradient(red,blue,red)'});
回答by motown
When using .css() in jquery, I believe you have to use the shortened versions of the attributes. For example, margin-left would be marginLeft
在 jquery 中使用 .css() 时，我相信您必须使用属性的缩短版本。例如， margin-left 将是 marginLeft
$(element).css("backgroundImage","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");
