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

這些方法無效嗎？

來源

2011-05-16 Dave

你的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/

來源

2011-05-16 12:00:58 Dutchie432

另一個選擇是使用jQuery addClass方法。這允許您動態地添加和刪除類，因此可以動態添加和刪除與該類相關的任何格式（包括漸變）。

來源

2012-03-05 13:43:55 WSimpson

-3

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

來源

2012-07-07 18:26:46 motown

側注，網絡套件漸變不是背景圖像其背景 – 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)',   
});

來源

2013-03-30 01:13:57

這裏是一小塊例子...

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

來源

2014-01-24 12:08:44

在jQuery中應用css3漸變

回答

相關問題