Làm cách nào để đặt thuộc tính background-image thành gradient tuyến tính bằng phương pháp css của jQuery?

Question

Khi tôi sử dụng này trên trang của mình gradient nền không xuất hiện (tôi chỉ lo lắng về Safari và Firefox tại thời điểm này):

$("#myElement").css({ 
    backgroundImage: "-webkit-gradient(linear, top, bottom, from(black), to(white)", 
    backgroundImage: "-moz-linear-gradient(top, black, white)" 
}); 

tôi đã cố gắng chỉ sử dụng một hay khác cũng trong các trình duyệt thích hợp, nhưng không có may mắn ở đó.

Tôi chỉ có thể sử dụng thuộc tính kiểu nội tuyến cho phần tử trong mã của mình, nhưng tôi không muốn làm theo cách đó nếu có cách để thực hiện việc đó bằng API của jQuery.

Answer 1

Các công trình sau đây cho tôi.

$("#myElement").css({ 
    background: "-webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF))"}).css({ 
    background: "-moz-linear-gradient(top, black, white)" 
}); 

jsFiddle Demo

Thay đổi:

• nền thay vì backgroundImage
• trên, dưới tới: trên bên trái, bên trái phía dưới
• mất tích đóng ngoặc từ gradient webkit
• thay đổi màu đen và trắng để # 000000 và #FFFFFF
• thêm một .css thứ hai

Thử nghiệm trên Chrome và FF 6

Answer 2

Tôi cố gắng này trên Firefox 6.0.1 và nó làm việc cho tôi

$(function() { 

$("#myElement").css({ 
    backgroundImage: "-webkit-gradient(linear, top, bottom, from(black), to(white)", 
    backgroundImage: "-moz-linear-gradient(top, black, white)" 
}); 

}); 

HTML

<div id="myElement">testing</div> 

Answer 3

Có thể có một số sự khác biệt giữa các phiên bản mới hơn webkit tuổi trở lên:

How do I combine a background-image and CSS3 gradient on the same element?

tôi có một chút mẫu làm việc với những điều sau đây:

0.123.

$(function(){ 
    $("#myElement").css("background-image", "-webkit-linear-gradient(top, #000000, #ffffff)"); 
    $("#myElement").css("background-image", "-moz-linear-gradient(top, black, white)"); 
}); 

đây là một fiddle:

http://jsfiddle.net/Hmmpd/1/

Edit:

Odd, sử dụng css "bản đồ" phiên bản của công việc css trong Firefox nhưng không phải phiên bản của tôi về Chrome. I E. các công trình sau đây cho tôi trong firefox nhưng không chrome:

$(function(){ 
    $("#myElement").css({backgroundImage: "-webkit-linear-gradient(top, #000000,#ffffff)",backgroundImage: "-moz-linear-gradient(top, black, white)"}); 
});