Override văn bản đục trong một div minh bạch với CSS

Question

Tôi cố gắng để làm cho văn bản bên trong một div minh bạch không có opacity, aka hoàn toàn đen:

<div style="opacity:0.6;background:#3cc;"> 
    <p style="background:#000;opacity:1">This text should be all black</p> 
</div> 

Đây có phải là có thể làm chỉ với CSS?

Cảm ơn trước

Answer 1

Các phần tử con kế thừa độ mờ. Những gì bạn có thể làm là đặt vị trí <p> bên ngoài div mờ đục và đặt một lề âm để di chuyển nó qua nó.

Tôi gặp vấn đề này thường xuyên và thường giải quyết vấn đề như thế này. Vấn đề là chỉ khi bạn có nội dung động và div phải mở rộng.

Answer 2

Cách đơn giản nhất là để tạo kiểu nền của div cha mẹ với opacity/alpha:

div { 
    background: #fff; /* for browsers that don't understand the following rgba rule */ 
    background-color: rgba(255,255,255,0.5); /* rgb, white, with alpha at 0.5 */ 
} 

Đây là không, tuy nhiên, tương thích với trình duyệt IE.

Đối với IE> = 7 tương thích, bạn có thể sử dụng:

div { 
    background-image: url('path/to/partially_transparent.png'); 
    background-position: 0 0; 
    background-repeat: repeat; 
} 

tôi nhớ lại rằng IE < 7 có một tùy chọn bộ lọc độc quyền, nhưng tôi sợ tôi không thể nhớ cách nó hoạt động. Vì vậy, tôi đã bỏ qua bất kỳ nỗ lực nào để mô tả/hiển thị nó. Nếu tôi có thể tìm thấy một tài liệu tham khảo hữu ích mặc dù tôi sẽ thêm nó vào sau này.

Như đã lưu ý bằng cách giảm độ mờ được thừa kế bởi các phần tử chứa, đó là lý do tại sao bạn không thể ghi đè lên và đó là lý do tôi thích sử dụng phương pháp background-color/background-image.

Answer 3

Nền có bao gồm màu đồng nhất không? Nếu vậy, bạn cũng có thể sử dụng RGBa để chọn màu nền trong suốt cho số div không được thừa kế bởi các con của nó. Đọc RGBa Browser Support để biết thêm thông tin, giải pháp cho IE và another solution.

Nếu nền của div không chắc chắn, bạn có thể sử dụng PNG trong suốt làm nền. Hãy nhớ sử dụng AlphaImageLoader trong IE6 (và 5.5).