Độ mờ CSS - màu nền

Question

Tôi đang cố gắng để có được độ mờ của div màu đen là 0,5 nhưng nội dung của thẻ div (h3) là opactiy 1. Vì vậy, văn bản màu trắng vẫn còn màu trắng, với độ mờ của nó không thay đổi/không bị ảnh hưởng.

<div style="background-color:red;"> 
<div style="width:470px;color:white;margin-top:170px;"> 
<div style="background-color:black;opacity:0.5;"> 
<h3 style="color:white;opacity:1;">Heading </h3><p>tagline here</p> 
</div> 
</div> 
</div> 

JSFiddle

gợi ý Bất kỳ nhiều đánh giá cao.

Answer 1

Bạn có thể sử dụng rgba thay vì nếu bạn không phải lo lắng về việc hỗ trợ các phiên bản cũ của IE:

background-color: rgba(0, 0, 0, 0.5); 

Answer 2

Sử dụng rgba - DEMO

background-color: rgba(0, 0, 0, .5) 

(và không sử dụng inline CSS)

Answer 3

Độ mờ áp dụng cho các phần tử con. Vì @MattCain đề xuất sử dụng RGBA trên Màu nền DIV để giải quyết vấn đề này.

<div style="background-color:red;"> 
<div style="width:470px;color:white;margin-top:170px;"> 
<div style="background-color: rgba(0, 0, 0, 0.5);"> 
<h3 style="color:white;opacity:1;">Heading </h3><p>tagline here</p> 
</div> 
</div> 
</div>