2012-02-21 70 views
5

Tôi muốn lấy màu nền hiện tại của phần tử div và chỉ điều chỉnh độ mờ ... làm cách nào để tôi làm điều đó?Làm cách nào để thay đổi độ mờ màu nền (không phải văn bản) bằng javascript?


Tìm thấy giải pháp rất đơn giản cho vấn đề của tôi; đòi hỏi jquery-color Plugin nhưng đó là bởi đến nay các giải pháp tốt nhất theo ý kiến ​​của tôi:

$('#div').css('backgroundColor', $.Color({ alpha: value })); 
+0

Sử dụng jquery UI – Alfabravo

Trả lời

6

Opacity là khó khăn, vì vẫn còn không qua trình duyệt cơ chế hỗ trợ, mặc dù phải của nó sẽ được trong CSS3.

Điều bạn có thể muốn làm là thay đổi kênh alpha của phong cách background-color. Xem: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/


Có người đã phát triển một plugin JQuery mà chỉ là những gì bạn muốn: http://archive.plugins.jquery.com/project/backOpacity

Với plugin này, bạn có thể kiểm soát chỉ là "opacity lại" mà không ảnh hưởng phần tử con.

+1

[A giới thiệu ngắn gọn để Opacity và RGBA] (http: // www. css3.info/introduction-opacity-rgba/). –

-1

Tải lên hình nền hoặc màu sắc của bạn trong Photoshop và giảm độ mờ đục ở đó và lưu nó dưới dạng .jpeg và sau đó sử dụng làm nền trong HTML.

đơn giản như rằng ....: D

+0

JPEG không phải là ([thường] (http://stackoverflow.com/questions/2639866/jpeg-image-with-alpha-channel-on-website)) được sử dụng với độ mờ. Sử dụng hình ảnh là không hiệu quả để bắt đầu, nhưng với mục đích cụ thể của việc có opacity không nhị phân, tôi muốn nói PNG là con đường để đi. –

4

Plugin query-color là một giải pháp tốt đẹp, tuy nhiên Tôi tin chắc rằng bạn không cần phải quá tải ứng dụng của bạn với các plugin không cần thiết cho như vậy một cách dễ dàng và đơn giản bài tập.

Dưới đây là một cách tiếp cận sử dụng chuỗi:

var alpha = "0.8"; 

var oldBGColor = $('#div').css('backgroundColor'); 
// rgb(40,40,40) 

var newBGColor = oldBGColor.replace('rgb','rgba').replace(')', ','+alpha+')'); 
// rgba(40,40,40,.8) 

$('#div').css('backgroundColor', newBGColor); 

Dưới đây là một ví dụ jsFiddle làm thế nào để sử dụng nó.

Tôi có một số similar problem và nó tạo ra sự kỳ diệu cho tôi.

0

nếu bạn muốn đi từ opacity x.xxx tới 1 bạn có thể làm

var element = $("#id") 
element.css('backgroundColor', element.css('backgroundColor').replace(/(\d\.?\d*)\s*\)/i, "1")) 

làm nghịch đảo chỉ cần thay đổi 1 bằng giá trị bạn muốn.

Lưu ý màu sắc của bạn cần phải có "rgba (100, 100, 100, 0,85098)" định dạng từ đầu

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