2011-09-08 54 views
7

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):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?

$("#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.

+0

Tôi đã thử nghiệm trong phiên bản Firefox 6.0.1, và làm việc của nó đối với tôi – Meenakshi

Trả lời

5

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

+0

tôi đã khám phá ra "top" -> "phía trên bên trái" giải pháp tối hôm qua sau khi tôi đăng tải câu hỏi của tôi. Tôi chưa bao giờ thực sự nghĩ đến cuộc gọi phương thức css kép mà làm việc cho tôi vì vậy cảm ơn rất nhiều vì điều đó! Tôi thực sự có thể sử dụng thuộc tính backgroundImage và tôi ngạc nhiên rằng nền sẽ làm việc cho bạn vì tôi đọc ở đâu đó rằng jQuery không chấp nhận kiểu "combo" trong phương thức css của nó (có thể thay đổi trong phiên bản mới nhất của thư viện). Tôi cũng có thể sử dụng màu đen và trắng thay vì # 000000 và #ffffff.Oh, và các dấu ngoặc đơn còn thiếu chỉ là một lỗi đánh máy cho ví dụ này. :-) Cảm ơn một lần nữa !! – natlee75

0

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> 
0

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

Tôi gặp vấn đề tương tự. Sau khi tôi đã thử cuộc gọi phương thức css kép theo đề nghị của bạn và Toukakoukan mọi thứ dường như hoạt động tốt. Có vẻ như phiên bản "bản đồ"/"đối tượng" của cuộc gọi phương thức css đơn giản thay thế từng kiểu được bao gồm theo thứ tự như kiểu cuối cùng trong đối tượng luôn là thứ được sử dụng. – natlee75

Các vấn đề liên quan