क्या सीएसएस में पृष्ठभूमि-छवि के समतुल्य अग्रभूमि है?

Question

मैं वेबपृष्ठ पर किसी तत्व को कुछ चमक जोड़ना चाहता हूं। अगर मुझे पृष्ठ पर अतिरिक्त एचटीएमएल जोड़ने की ज़रूरत नहीं है तो मैं पसंद करूंगा। मैं चाहता हूं कि छवि पीछे के बजाए तत्व के सामने दिखाई दे। ऐसा करने का सबसे अच्छा तरीका क्या है?

Answer 1

अतिरिक्त एचटीएमएल कोड के बिना एक "अग्रभूमि छवि" प्राप्त करने के लिए, आप एक छद्म तत्व (::before/:before) प्लस सीएसएस pointer-events उपयोग कर सकते हैं। आखिरी संपत्ति की आवश्यकता है ताकि उपयोगकर्ता वास्तव में परत के माध्यम से क्लिक कर सके "जैसे कि यह अस्तित्व में नहीं था"। http://jsfiddle.net/JxNdT/

​<div id="cont"> 
Test<br> 
<input type="text" placeholder="edit"> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

​#cont { 
    width: 200px; 
    height: 200px; 
    border: 1px solid #aaa; /*To show the boundaries of the element*/ 
} 
#cont:before { 
    position: absolute; 
    content: ''; 
    background: rgba(0,0,0, 0.5); /*partially transparent image*/ 
    width: 200px; 
    height: 200px; 
    pointer-events: none; 
} 
​ 

पुनश्च:

यहाँ एक उदाहरण (एक रंग जिसका अल्फ़ा चैनल 50% है, ताकि आप देख सकते हैं कि वास्तविक तत्व वास्तव में केंद्रित किया जा सकता का उपयोग) है। मैंने ::before छद्म-तत्व चुना है, क्योंकि यह स्वाभाविक रूप से सही स्थिति को जन्म देता है। अगर मैं ::after चुनता हूं, तो मुझे वास्तविक तत्व (#cont), और top:0;left:0; को छद्म-तत्व (::after) में position:relative; जोड़ना होगा।

---

पीपीएस। एक निश्चित आकार के बिना तत्वों पर अग्रभूमि प्रभाव प्राप्त करने के लिए, एक अतिरिक्त तत्व की आवश्यकता है। इस रैपर तत्व को position:relative;display:inline-block; शैलियों की आवश्यकता होती है। छद्म-तत्व के 100% पर width और height सेट करें, और छद्म-तत्व रैपर तत्व की चौड़ाई और ऊंचाई तक फैलाएगा। डेमो: http://jsfiddle.net/JxNdT/1/।

Answer 2

आप इस सीएसएस

#yourImage 
{ 
z-index: 1; 
} 

नोट का उपयोग कर सकते

सेट अधिक से अधिक तत्व है जिस पर आप छवि लगा रहे हैं की z-index सूचकांक को z-index।

यदि आपने कोई z-index निर्दिष्ट नहीं किया है तो 1 काम करेगा।

आप z-index से -1 पर भी सेट कर सकते हैं, उस स्थिति में छवि हमेशा background पर होगी!

Answer 3

आप एक सफेद पारदर्शी अग्रभूमि

यह मेरे जैसे भविष्य आगंतुकों को जो संवाद करने के लिए है कि यह उदाहरण के लिए विकलांग छिपा हुआ है/एक तत्व के लिए एक सफेद पारदर्शी अग्रभूमि जोड़ने पर विचार कर रहे हैं के लिए है की जरूरत है। आप अक्सर बस 1 से नीचे opacity घटाकर अपने लक्ष्य को प्राप्त कर सकते हैं:

.is-hidden { 
 
    opacity: 0.5; 
 
}

visible 
 
<span class="is-hidden">hidden</span> 
 
visible