在jQuery中应用css3渐变

问题描述：

最后，我希望根据不同的事情动态更改渐变，但是如何让jquery应用css3渐变？在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%");

我在想什么？我也试过

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

这些方法无效吗？

你的CSS不起作用。 – alex 2011-05-16 12:03:29

可能重复？ http://stackoverflow.com/questions/5735521/jquery-css-gradient/5735588 – Zirak 2011-05-16 12:04:06

答

你的第二个方法看起来OK ......也许你需要的CSS样式非WebKit浏览器，以及... Cross-Browser CSS Gradient

这works for me在Chrome

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

也看看： http://www.colorzilla.com/gradient-editor/

答

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

答

在jQuery中使用.css（）时，我相信你必须使用缩短版本的属性。例如，保证金左将我使用的是复姓语法的JSON格式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 2012-07-07 18:27:25

不，它是一个'背景图像' – 2012-10-10 18:12:53

它应该当您使用您提供的语法时，请将其设为'background-image'。当您编写多个属性时，您应该使用camelCase ...就像这样：'$（element）.css（{backgroundImage：'whatever';}）' – 2012-10-10 18:14:33

答

（我一直使用JSON格式要一致）。在Chrome和Firefox中都可以正常工作。

例如：当直接应用于

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

答

这里是一小块例子...

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

在jQuery中应用css3渐变

相关推荐