पृष्ठभूमि ओवरले बनाने के लिए छद्म तत्व का उपयोग करें

Question

मेरा लक्ष्य किसी भी पृष्ठभूमि के साथ एक div है, जो एक पारदर्शी सफेद ओवरले बनाने के लिए एक छद्म तत्व का उपयोग करता है, इस प्रकार div की पृष्ठभूमि को "हल्का" करता है। हालांकि, "ओवरले" div की सामग्री के नीचे होना चाहिए। तो, निम्न उदाहरण में:

<div class="container"> 
    <div class="content"> 
     <h1>Hello, World</h1> 
    </div> 
</div> 

.container { 
    background-color: red; 
    width: 500px; 
    height: 500px; 
    position: relative; 
} 
.content { 
    background-color: blue; 
    width: 250px; 
} 
.container::before { 
    content:""; 
    display: block; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 1; 
    background-color: rgba(255, 255, 255, .8); 
} 

.contentdiv नहीं "नीचे" सफेद ओवरले, उर्फ ​​.container::before होना चाहिए।

मैं z-index.content पर उपयोग नहीं करना चाहूंगा, लेकिन अगर यह एकमात्र समाधान हो तो मैं कर सकता हूं।

अंतिम लक्ष्य: पाठ और नीले रंग के दौरान लाल को कवर किया जाना चाहिए।

जे एस बेला: http://jsfiddle.net/1c5j9n4x/ छद्म तत्व एक z-index है

Answer 1

है, तो आप .content तत्व की स्थिति और establish a stacking context करने के लिए एक z-index मूल्य जोड़ने की आवश्यकता होगी।

Updated Example

.content { 
    background-color: blue; 
    width: 250px; 
    position: relative; 
    z-index: 1; 
} 

..you भी z-index छद्म तत्व से हटा दें सकते हैं और फिर केवल .content तत्व की स्थिति। ऐसा करने में, किसी भी तत्व को z-index की आवश्यकता नहीं है। इसका कारण यह है कि :before छद्म तत्व अनिवार्य रूप से पिछले भाई तत्व है। इस प्रकार, .content तत्व शीर्ष पर स्थित है।

Alternative Example

.content { 
    background-color: blue; 
    width: 250px; 
    position: relative; 
} 
.container::before { 
    content:""; 
    display: block; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(255, 255, 255, .8); 
}