बच्चे छवि के शीर्ष पर पैरेंट तत्व के लिए सीएसएस इंसेट बॉक्स-छाया जोड़ें

Question

मैं मूल ऑब्जेक्ट में छाया जोड़ने की कोशिश कर रहा हूं जहां एक बच्चा <img> तत्व इसके अंदर स्थित है। मैं इमेज छाया को छवि को ओवरलैप करने के लिए चाहता था।

मेरे एचटीएमएल कोड है:

<section class="highlights"> 
    <img src="images/hero.jpg" alt="" /> 
</section><!-- End section.highlights --> 

और सीएसएस:

.highlights { 
    height: 360px; 
    padding: 0; 
    position: relative; 
    overflow: hidden; 
    opacity: 0.9; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    z-index:1; 
} 
.highlights img { 
    height: auto; 
    width: 100%; 
    margin: 0 auto; 
    display: block; 
    position: relative; 
} 

.highlights { 
    -webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2); 
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2); 
} 

छाया मेरे लिए दिखाई दे रहा है। मैंने गलत क्या किया?

Answer 1

समस्या यह है कि इन्सेट बॉक्स-छाया के शीर्ष पर छवि प्रदान की जाती है।

ऐसा करने के 2 संभावित तरीके हैं, मैं इसे <img> पर अस्पष्टता का उपयोग करके छाया के पीछे धक्का देने के लिए और छवि के शीर्ष पर इन्सेट छाया को स्थानांतरित करने का दूसरा तरीका है। मैं दूसरा दृष्टिकोण पसंद करता हूं क्योंकि छवि की पूरी अस्पष्टता बरकरार रखी जा सकती है।

नोट: मैंने सीमा के लिए सीमा को बड़ा और लाल बना दिया है।

Solution 1 demo

एचटीएमएल

<section class="highlights"> 
    <img src="http://lorempixel.com/500/360/city/1/" alt=""/> 
</section> 

सीएसएस

.highlights { 
    height: 360px; 
    padding: 0; 
    position: relative; 
    overflow: hidden; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.highlights img { 
    height: auto; 
    width: 100%; 
    margin: 0 auto; 
    display: block; 
    opacity: .9; 
} 
.highlights { 
    -webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2); 
    box-shadow: inset 0 0 25px 25px red; 
} 

Solution 2 demo

सीएसएस

.highlights { 
    height: 360px; 
    padding: 0; 
    position: relative; 
    overflow: hidden; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.highlights img { 
    height: auto; 
    width: 100%; 
    margin: 0 auto; 
    display: block; 
} 
.highlights::before { 
    -webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2); 
    box-shadow: inset 0 0 25px 25px red; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    content: ""; 
}