Làm thế nào để thay đổi độ mờ của màu nền trong CSS

Question

Tôi có tệp PNG mà tôi cung cấp màu nền cho các vùng trong suốt của nó, nhưng tôi muốn làm cho màu nền trong suốt một chút, như độ mờ đục. Đây là mã của tôi cho đến nay:

social img{ 
    opacity:0.5; 
} 
.social img:hover { 
    opacity:1; 
    background-color:black; 
} 

Answer 1

background: rgba(0,0,0,.5); 

bạn có thể sử dụng rgba cho opacity, sẽ chỉ làm việc trong ie9 + và các trình duyệt tốt hơn

Answer 2

Sử dụng RGBA như thế này: background-color: rgba(255, 0, 0, .5)

Answer 3

Sử dụng RGB các giá trị được kết hợp với opacity để có được độ trong suốt mà bạn muốn.

Ví dụ,

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 1;">&nbsp;</div> 

Tương tự, với giá trị thực tế mà không làm mờ, sẽ cung cấp cho các bên dưới.

<div style=" background: rgb(243, 191, 189) ; ">&nbsp;</div> 
<div style=" background: rgb(246, 143, 142) ; ">&nbsp;</div> 
<div style=" background: rgb(249, 95 , 94) ; ">&nbsp;</div> 
<div style=" background: rgb(252, 47, 47) ; ">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0)  ; ">&nbsp;</div> 

Bạn có thể xem WORKING EXAMPLE này.

Bây giờ, nếu chúng tôi nhắm mục tiêu cụ thể vấn đề của bạn, dưới đây là WORKING DEMO SPECIFIC TO YOUR ISSUE.

HTML

<div class="social"> 
    <img src="http://www.google.co.in/images/srpr/logo4w.png" border="0" /> 
</div> 

CSS:

social img{ 
    opacity:0.5; 
} 
.social img:hover { 
    opacity:1; 
    background-color:black; 
    cursor:pointer; 
    background: rgb(255, 0, 0) ; opacity: 0.5; 
} 

Hope this helps Now.

Answer 4

Không quá chắc chắn để thêm độ mờ qua CSS là một ý tưởng hay.
Độ mờ có cách hài hước để áp dụng cho tất cả nội dung và trẻ em từ nơi bạn đặt, với kết quả không mong muốn về màu sắc lẫn lộn.
Nó không có mục đích thực sự trong trường hợp đó, cho một màu bg, theo ý kiến ​​của tôi.
Nếu bạn muốn đặt nó di chuột qua hình ảnh bg, thì bạn có thể sử dụng nhiều hình nền.
màu này trong suốt có thể được applyed qua một png thêm lặp đi lặp lại (hoặc không có background-position),
CSS dốc (radial-) linear gradient với màu rgba (bắt đầu và kết thúc với cùng một màu) có thể đạt được điều này là tốt. Chúng được coi là hình nền và có thể được sử dụng làm bộ lọc.
Idem cho văn bản, nếu bạn muốn chúng trong suốt một chút, hãy sử dụng rgba (không được đặt text-shadow với nhau).

Tôi nghĩ rằng hôm nay, chúng ta có thể làm giảm hoạt động hài hước của độ mờ CSS.

Đây là một hỗn hợp của rgba sử dụng cho opacity nếu bạn là dabblet.com/gist/5685845 tò mò

Answer 5

Sử dụng rgba như hầu hết các trình duyệt thông dụng hỗ trợ nó ..

.social img:hover { 
background-color: rgba(0, 0, 0, .5) 
}