Thuộc tính Opacity CSS

Question

Xin chào, tôi đang sử dụng thuộc tính Opacity CSS cho thẻ div và nó hoạt động tốt nhưng vấn đề là khi tôi viết một số văn bản hoặc dán hình ảnh trên thẻ div đó cũng bị mờ dần. Tôi chỉ cần div trở lại màu sắc để phai mờ và không phải là nội dung div. Mã của tôi là ...

#fade div 
{ 
opacity:0.1; 
filter:alpha(opacity=10); /* For IE8 and earlier */ 
width:750px; 
height:150px; 
background-color:#FFFFFF; 
} 

#text in fade div 
{ 
font-weight:bold; 
color:#8A2BE2; 
} 

Thankyou !!!

Answer 1

Dễ dàng hơn khi sử dụng rgba() hoặc PNG trong suốt cho nền.

rgba(0, 0, 0, .1); 
rgba(0, 0, 0); //fallback 

Answer 2

ofcourse opacity cũng áp dụng cho các phần tử con. Bạn có thể làm gì để phân biệt đánh dấu của mình.

<div id='Div-With-Opacity-set'> 
</div> 
<div id='Child-Elements-for-the-above-div'> 
</div> 

Căn chỉnh đánh dấu cẩn thận sao cho đánh dấu giống với những gì bạn muốn.

Answer 3

Bạn có thể sử dụng rgba() tài sản cho việc này:

ghi như thế này:

#fade div 
{ 
background-color: rgba(0,0,0,0.1); 
width:750px; 
height:150px; 
background-color:#FFFFFF; 
} 

Đối với IE bạn có thể sử dụng IE filter

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); /* IE6 & 7 */  zoom: 1; 

Bạn có thể tạo bộ lọc của mình từ đây http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

Answer 4

Tại sao bạn không quay lại đặt độ mờ sau đó?

#text in fade div 
{ 
    font-weight:bold; 
    color:#8A2BE2; 
    opacity:1; 
    filter:alpha(opacity=100); /* For IE8 and earlier */ 
} 

Answer 5

Chỉ cần sử dụng gif bán trong suốt 1px và lặp lại nó bằng x và y. Theo tôi biết đó là cách dễ nhất để thiết lập nền bán trong suốt.

Answer 6

Đặt cược tốt nhất của bạn mà không có CSS3 có lẽ là tạo một div và đặt một div khác được đặt trên nó, nhưng không được lồng vào bên trong nó. Bộ lọc độ mờ giảm xuống TẤT CẢ các phần tử bên trong phần tử bằng bộ độ mờ.

Nếu bạn đặt div ngay lập tức sang bên phải và sau đó cho nó một lề là -750px ;, bạn có thể cho nó độ mờ là 1, nhưng div đằng sau nó có thể có độ mờ là 0,1 và điều này sẽ hoạt động khỏe.

Với CSS3 bạn có thể làm điều này:

#fade 
{ 
width:750px; 
height:150px; 
background-color: rgba(255,255,255,0.1); 
} 

và chỉ nền sẽ là 0,1 độ mờ đục. Văn bản vẫn sẽ là 1.

Điều mà cá nhân tôi làm thường xuyên nhất là tôi tạo một .png nhỏ với nền trong suốt mà tôi muốn và sau đó tôi đặt .png làm nền của phần tử. Trong photoshop tôi có thể thiết lập độ mờ đục của nền trắng thành 0.1, sau đó lưu một hình vuông 50X50, và sau đó tôi đã có độ trong suốt gần như hoàn hảo (không có IE6).

Answer 7

giống như http://jsfiddle.net/PWM5f/ bạn cần