एक छवि पर पारदर्शी div लेकिन अपारदर्शी पाठ

Question

मेरे पास निम्न HTML कोड है जो टेक्स्ट युक्त एक पारदर्शी काला ओवरले वाला चित्र दिखाता है।

मैं अपने पाठ को पारदर्शी होने के लिए नहीं चाहता हूं। मैं z-index साथ करने की कोशिश की, लेकिन मेरे पाठ अभी भी पारदर्शी है:

क्या मेरी कोड के साथ गलत क्या है?

यह मेरी HTML है:

<div class="leftContainer"> 
    <div class = "promo"> 
     <img src="images/soon.png" width="415" height="200" alt="soon event" /> 

     <div class="hilight"> 
      <h2>Hockey</h2> 
      <p>Sample text</p> 
     </div> 

    </div> 

    ... 

</div> 

और यह मेरा सीएसएस है:

.hilight h2{ 
    font-family: Helvetica, Verdana; 
    color: #FFF; 
    z-index: 200; 
} 

.promo { 
    position: relative; 
} 
.promo img { 
    z-index: 1; 
} 

.hilight { 
    background-color: #000; 
    position: absolute; 
    height: 85px; 
    width: 415px; 
    opacity: 0.65; 
    font-family: Verdana, Geneva, sans-serif; 
    color: #FFF; 
    bottom: 0px; 
    z-index: 1; 
} 

Answer 1

परिवर्तन RGBA (0,0,0,0.65) को .hilight की पृष्ठभूमि और अस्पष्टता को दूर ।

.hilight { 
background-color: rgba(0,0,0,0.65); 
position: absolute; 
height: 85px; 
width: 415px; 
font-family: Verdana, Geneva, sans-serif; 
color: #FFF; 
bottom: 0px; 
z-index: 1; 
} 

Answer 2

अंदर सबकुछ में 0.65 की अस्पष्टता होगी। ओवरले div के बाहर पाठ को ले जाएं।

Answer 3

आपको केवल पृष्ठभूमि में अस्पष्टता सेट करने की आवश्यकता है, न कि संपूर्ण div और इसकी सामग्री। आप rgba रंग चयन जैसे

div { 
    background: rgba(0,0,0,0.50); 
} 

के साथ क्या कर यह कुछ background-position साथ एक अर्द्ध पारदर्शी png छवि का उपयोग किया जाएगा के अन्य तरीके से ऐसा कर सकते हैं। यह तब multibrowser संगत

Answer 4

क्रॉस ब्राउज़र समर्थन के लिए पारदर्शी 1x1 पिक्सेल पीएनजी छवि ऐसा करने के लिए होगा।
आप इस साइट पर छवि उत्पन्न कर सकते हैं: http://www.1x1px.me/
तो बस background-color और opacity हटाने और बस background:url(bg.png);

jsFiddle Live Demo