सीएसएस अस्पष्टता - पृष्ठभूमि रंग

Question

मैं ब्लैक डिवी की अस्पष्टता प्राप्त करने की कोशिश कर रहा हूं .5 लेकिन div (h3 टैग) की सामग्री opactiy होने के लिए 1 है। इसलिए सफेद पाठ अभी भी सफेद है, इसकी अस्पष्टता नहीं बदली है/अछूता।

<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

कोई सुझाव बहुत सराहना।

Answer 1

आप IE के पुराने संस्करणों के समर्थन के बारे में RGBA इस्तेमाल कर सकते हैं तो आप कोई चिंता नहीं है बजाय यदि:

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

Answer 2

उपयोग rgba - DEMO

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

(और इनलाइन सीएसएस उपयोग न करें)

Answer 3

अस्पष्टता बाल तत्वों पर लागू होती है। चूंकि @ मैटकेन इस बारे में जानने के लिए डीआईवी पृष्ठभूमि रंग पर आरजीबीए का उपयोग करने का सुझाव देता है।

<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>