使用jQuery应用CSS3渐变效果

Question

最终，我希望能根据不同的条件动态地改变渐变色，但是如何让jquery应用css3渐变呢？请保留HTML标签。

 //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%");

我错过了什么？我也尝试过

。

 $(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)"});

这些方法不可行吗？

- Dave

---

当直接应用时，您的CSS也无法正常工作。 - alex

可能是重复的问题？https://dev59.com/iFbTa4cB1Zd3GeqP-msn#5735588 - Zirak

请注意，如果您试图应用具有无效空格的CSS样式，则它们可能根本不会应用（或者至少在Chrome中是这样）。在这种情况下，您需要通过检查器删除所有额外的空格，直到渐变更新，然后相应地更新您的JavaScript。 - Jack

Answer 1

你的第二种方法看起来不错... 或许你还需要为非webkit浏览器添加css样式... 跨浏览器CSS渐变

这对我在Chrome中有效

$('#block').css({
    background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))" 
});

还可以看看：http://www.colorzilla.com/gradient-editor/

- Dutchie432

Answer 2

另一个选择是使用jQuery的addClass方法。这允许您动态添加和删除类，因此包括渐变在内的任何与该类相关的格式都可以被添加或移除。

- WSimpson

Answer 3

这里是一个小例子...

$("p").css({background:'linear-gradient(red,blue,red)'});

- Sanu Uthaiah Bollera

Answer 4

我在JSON格式中使用连字符语法（为了保持一致性，我总是使用JSON格式）。在Chrome和Firefox中都可以正常工作。

例如：

$("#googleFeed div:even").css({
    'background':'-webkit-linear-gradient(top,white,black)',        
});

- Puneet Lamba

Answer 5

试一下这个

<div class="mygradient" />

$( '.mygradient' ).css( 
    "background-image", 
    "linear-gradient( to right, #dc8a8a 50%, red 10% )" 
);

- ADamian17

Answer 6

在使用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))");

- motown

---

附注：Webkit渐变不是背景图像，而是背景。 - motown

使用您提供的语法时，应该是 background-image。当您编写多个属性时，应该使用 camelCase 命名法，就像这样：$(element).css({ backgroundImage : 'whatever'; })。 - Ahmad Alfy

只有在使用对象表示法设置属性时才是正确的，例如.css({backgroundImage:blah})，而不是他正在使用的.css('background-image', blah)实现。 - Jimbo Jonny

另外，Motown是错的，应该用background-image，而且仅使用background只是设置background-image的一种速记方式。 - Jimbo Jonny