अन्य निहित तत्वों के शीर्ष पर सीएसएस शो div पृष्ठभूमि छवि

यह सुनिश्चित नहीं है कि यह संभव है और कैसे, लेकिन मैंने बिना किसी सफलता के मेरे कोड में तत्वों के जेड-इंडेक्स के साथ खेलने की कोशिश की।अन्य निहित तत्वों के शीर्ष पर सीएसएस शो div पृष्ठभूमि छवि

मेरे पास एक div तत्व है जिसमें सीएसएस में पृष्ठभूमि छवि सेट है। div के अंदर, मेरे पास div और img जैसे अन्य तत्व हैं। मैं मुख्य div को रखने की कोशिश कर रहा हूं जिसमें पृष्ठभूमि छवि शीर्ष पर रहती है, क्योंकि मैं चाहता हूं कि पृष्ठभूमि छवि अन्य तत्वों के शीर्ष पर दिखें (इस पृष्ठभूमि छवि में कुछ गोलाकार कोनों हैं जिन्हें मैं छवि के शीर्ष पर दिखाना चाहता हूं इस div में)।

उदाहरण HTML:

<div id="mainWrapperDivWithBGImage"> 
    <div id="anotherDiv"> 
     <!-- show this img behind the background image 
     of the #mainWrapperDivWithBGImage div --> 
     <img src="myLargeImage.jpg" /> 
    </div> 
</div>

उदाहरण सीएसएस:

/* How can I make the bg image of this div show on top of other elements contained 
    Is this even possible? */ 

#mainWrapperDivWithBGImage { 
    background: url("myImageWithRoundedCorners.jpg") no-repeat scroll 0 0 transparent; 
    height: 248px; 
    margin: 0; 
    overflow: hidden; 
    padding: 3px 0 0 3px; 
    width: 996px; 
}

स्रोत

2010-12-29 IntricatePixels

यदि मुख्य div की पृष्ठभूमि छवि शीर्ष पर प्रदर्शित होती है, तो यह इसके नीचे के आंतरिक तत्वों को छिपाएगी और बच्चे के तत्व बेकार होंगे। क्या आपको यकीन है? – Chandu

यह एक अच्छा मुद्दा है! मुझे लगता है कि यह काम नहीं करेगा, कम से कम मेरे पास जिस तरह से घोंसला है ... – IntricatePixels

@ साइबर ऐसा लगता है कि पृष्ठभूमि छवि पृष्ठभूमि div के पूरे भर को नहीं ले रही है। बस इसका एक छोटा टुकड़ा। – JakeParis

मैं इसे पर background: url("myImageWithRoundedCorners.jpg"); सेट के साथ एक बिल्कुल उपयुक्त, z-index: 100; अवधि (या फैला) डाल अंदर #mainWrapperDivWithBGImage।

स्रोत

2010-12-29 18:24:30 JakeParis

@user यदि आप ऐसा करते हैं, तो रैपर div को 'स्थिति: रिश्तेदार के रूप में सेट करना सुनिश्चित करें; ' – JakeParis

हाँ यह काम किया ... लेकिन मुझे पृष्ठभूमि छवि को एक पारदर्शी पीएनजी बनाना था ताकि अंदर की सामग्री प्रदर्शित की जा सके। धन्यवाद! – IntricatePixels

@ उपयोगकर्ता 55 पृष्ठभूमि को एक पारदर्शी छवि बनाने से बेहतर है, 'पृष्ठभूमि: पारदर्शी' घोषित करें। इस तरह ब्राउजर को डाउनलोड करने के लिए एक कम आइटम है। – JakeParis

यदि आप गोलाकार कोनों के लिए पृष्ठभूमि छवि का उपयोग कर रहे हैं तो मैं पृष्ठभूमि छवि के गोलाकार कोनों के दृश्यमान कोनों के लिए पर्याप्त जगह देने के लिए मुख्य div की पैडिंग शैली को बढ़ा दूंगा।

मुख्य div शैली की गद्दी को बढ़ाने का प्रयास:

#mainWrapperDivWithBGImage 
{ 
    background: url("myImageWithRoundedCorners.jpg") no-repeat scroll 0 0 transparent; 
    height: 248px; 
    margin: 0; 
    overflow: hidden; 
    padding: 10px 10px; 
    width: 996px; 
}

पी.एस: मुझे लगता है गोलाकार कोनों 10px की परिधि की है।

स्रोत

2010-12-29 18:29:03 Chandu

<div id="mainWrapperDivWithBGImage"> को तीन divs के रूप में बनाने के बारे में, जहां दो बाहरी divs गोलाकार कोनों छवियों को पकड़ते हैं, और बीच div में गोलाकार कोने छवियों से मेल खाने के लिए पृष्ठभूमि-रंग होता है। तो फिर तुम बस बीच div के अंदर अन्य तत्वों जगह सकता है, या:

#outside_left{width:10px; float:left;} 
#outside_right{width:10px; float:right;} 
#middle{background-color:#color of rnd_crnrs_foo.gif; float:left;}

फिर

HTML:

<div id="mainWrapperDivWithBGImage"> 
    <div id="outside_left><img src="rnd_crnrs_left.gif" /></div> 
    <div id="middle"> 
    <div id="another_div"><img src="foo.gif" /></div> 
    <div id="outside_right><img src="rnd_crnrs_right.gif" /></div> 
</div>

आप स्थिति करना पड़ सकता है: रिश्तेदार; और ऐसा।

स्रोत

2010-12-29 18:48:21 Adam

अन्य निहित तत्वों के शीर्ष पर सीएसएस शो div पृष्ठभूमि छवि

उत्तर

संबंधित मुद्दे