CSS: Box + Text über Bild

Question

Zunächst möchte ich Ihnen ein Bild (in Farbe) zeigen.

Ok "aktuellen" ist das, was ich jetzt habe. Ich möchte eine Box über das Bild auf der rechten Seite mit schwarzem Hintergrund platzieren und dann Text in dieser Box haben.

Ich versuchte mich selbst mit z-Index und so, aber ohne Erfolg. Hier ist, was ich versucht habe:

<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> 

aber das hat sich nicht gut. Wie kann ich das machen?

Answer 1

So ähnlich?

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

HTML:

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

CSS

#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

Verwenden Sie position:absolute, um 2 Divs zu überlappen. Sie müssen mit left und top Eigenschaften spielen, um seine Position zu justieren.

<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

Ihr Code ist chaotisch und kompliziert für eine so einfache Frage, können Sie es eine Menge vereinfachen, indem nur zwei Elementen. Je einfacher, desto besser.

Bitte geben Sie an, ob Sie den Tag benötigen.

HTML:

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

CSS:

#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; 
} 

Und ein Beispiel für Sie hier: http://jsfiddle.net/Kyle_Sevenoaks/WQT6G/

Answer 4

Sie müssen diesen Text div innerhalb des div setzen, die das Bild enthält .. dann setze oben und rechts auf 0px und positioniere absolut. nimm einige Tipps von hier: http://jsfiddle.net/U25XQ/1/

Answer 5

Das folgende Beispiel zeigt, wie dies gemacht werden kann, lass es mich wissen, wenn es nicht das ist, was du meinst: Example.

Answer 6

z-index nur für positionierte Elemente arbeitet (position: (absolute|fixed|relative)). Also musst du deine Elemente positionieren. Zum Beispiel

<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> 

sollte funktionieren.

Answer 7

Ich ziehe es eine einfache und semantische HTML5 Lösung

HTML:

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

CSS:

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

zum Schreiben von Text über Bild, das Sie Bild im Hintergrund Stil und Alt-Text setzen wie

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