सीएसएस: छवि पर बॉक्स + टेक्स्ट

Question

सबसे पहले, मैं आपको एक छवि (पेंट में बना) दिखाना चाहता हूं।

ठीक है "वर्तमान" क्या मैं अब है। मैं काले रंग की पृष्ठभूमि के साथ दाईं ओर छवि पर एक बॉक्स रखना चाहता हूं, और फिर इस बॉक्स के अंदर टेक्स्ट रखना चाहता हूं।

मैंने ज़ेड-इंडेक्स का उपयोग करके खुद को कोशिश की और बिना किसी सफलता के। यहां मैंने जो कोशिश की है:

<div> <!-- start div for image --> 
    <img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image --> 
</div> <!-- end div --> 
<div style="z-index: 1; width: 300px; background: #000; position: relative;"> 
    <div style="margin: auto;"> 
    text text text 
    </div> 
</div> 

लेकिन इससे कोई अच्छा प्रदर्शन नहीं हुआ। मैं यह कैसे कर सकता हूँ?

Answer 1

ऐसा कुछ?

http://jsfiddle.net/QGMPB/1/

HTML:

<div id="wrap"> 
    <img src="http://jsfiddle.net/img/logo.png" /> 
    <div id="text">text</div> 
</div> 

सीएसएस

#wrap { 
    position:relative; /* make this relative to have the inner div absolute without  breaking out */ 
    width: 200px; /* fix the width or else it'll be the entire page's width */ 
    background: silver; 
    border: 1px solid grey 
} 

#text { 
    position: absolute; 
    width: 40px; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background: black; 
    color:white 
} 

Answer 2

2 divs को ओवरलैप करने के लिए position:absolute का उपयोग करें। आपको अपनी स्थिति समायोजित करने के लिए left और top गुणों के साथ खेलना होगा।

<div style="position:absolute"> <!-- start div for image --> 
    <img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image --> 
    </div> <!-- end div --> 
    <div style="position:absolute; z-index: 1; width: 300px; background: #000; position: relative; left:3%; top:85%"> 
    <div style="margin: auto;">text text text</div> 
    </div> 

Answer 3

आपका कोड इतना आसान मुद्दा के लिए गन्दा और जटिल है, आप केवल दो तत्वों का उपयोग करके इसे सरल बना सकते हैं। बेहतर आसान है।

कृपया निर्दिष्ट करें कि आपको <img> टैग की आवश्यकता है या नहीं।

HTML:

<div id="golf_course"> 
    <div class="text_wrap_right"> 
     text text text text 
    </div> 
</div> 

सीएसएस:

#golf_course 
{ 
    background-image: url(http://ww1.prweb.com/prfiles/2006/12/13/491548/ThaiGolfCourse.JPG); 
    background-position: 0 -200px; 
    width: 900px; 
    height: 259px; 
    border: 5px solid #000; 
} 

.text_wrap_right 
{ 
    width: 300px; 
    height: 100%; 
    float: right; 
    background: #000; 
    color: #fff; 
    border-left: 2px solid #000; 
} 

और आप के लिए एक उदाहरण यहाँ: http://jsfiddle.net/Kyle_Sevenoaks/WQT6G/

Answer 4

आप div कि छवि है अंदर है कि पाठ div लगाने की जरूरत है .. फिर ऊपर और दाएं 0px और स्थिति पूर्ण सेट करें। यहां से कुछ संकेत लें: http://jsfiddle.net/U25XQ/1/

Answer 5

निम्नलिखित उदाहरण दिखाता है कि यह कैसे किया जा सकता है, कृपया मुझे बताएं कि क्या आपका मतलब यह नहीं है: Example।

Answer 6

z-index केवल तैनात तत्वों (position: (absolute|fixed|relative)) के लिए काम करता है। तो आपको अपने तत्वों को स्थापित करना होगा। उदाहरण के लिए

<div style="position: relative;"> 
    <div style="position: absolute; top: 0; left: 0; z-index: 0; height: 100px; width: 300px;"> 
<img src="http://w3schools.com/images/w3cert.gif" /> 
    </div> 
    <div style="z-index: 1; width: 200px; background: #000; position: absolute; left: 100px; color: #fff;"> 
<div style="margin: auto;">text text text</div> 
    </div> 
</div> 

काम करना चाहिए।

Answer 7

मैं एक सरल और अधिक अर्थ एचटीएमएल 5 समाधान पसंद

HTML:

<figure> 
    <img src="..." /> 
    <figcaption>text text text ... </figcaption> 
</figure> 

सीएसएस:

figure { 
    position : relative; 
    z-index : 1; 
    width : 860px; 
    height : 240px; 
} 

figcaption { 
    position : absolute; 
    z-index : 1; 
    top  : 0; 
    right : 0; 
    width : 200px; 
    height : 240px; 
    background : #000; 
} 

Answer 8

टेक्स्ट लिखने के लिए छवि पर आप की तरह पृष्ठभूमि शैली और वैकल्पिक पाठ में छवि डाल यह-

<img scr="" alt="text"/> 
<style> 
.img{background-image:url('IMAGE_URL'); } 
</style>