CSS: Box+text über Bild

Erstens, ich möchte Ihnen zeigen, ein Bild(in Farbe).

Okay "aktuelle" ist das, was ich jetzt habe. Ich will um einen Kasten über das Bild, um das Recht, mit schwarzen hintergrund, und dann der text innerhalb dieser box.

Versuchte ich 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 dieser dreht sich nicht aus jedem guten. Wie kann ich dies tun?

InformationsquelleAutor Karem | 2010-11-11

Sowas?

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
}

Und das ist, wie es zu tun, die noch halten, das img-element! 🙂
Ja, dein code ist genau das gleiche, außer für die img-tags. Nur hängt von der situation ab, welcher der beiden besser ist 🙂

InformationsquelleAutor Stephan Muller

5

Ihr code ist chaotisch und kompliziert für so ein einfaches Problem, Sie vereinfachen es eine Menge nur zwei Elemente. Je einfacher, desto besser.

Bitte geben Sie, wenn Sie müssen die <img> tag.

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 Euch ein Beispiel hier: http://jsfiddle.net/Kyle_Sevenoaks/WQT6G/
- Ich muss den img-tag
- div-ification ist keine saubere Lösung, vor allem, wenn die entsprechenden tags vorhanden sind
- dann Litso die Antwort für Sie.
- alle browser unterstützen können, neue Elemente, auch IE mit html5shiv. Wenn eine Technologie sollte beendet werden, bevor Sie verwendet wird, dann würde ich auch nicht verwenden CSS 2.1 (nicht vollständig unterstützt ALLE browser).
InformationsquelleAutor Kyle

Ich bevorzuge einen einfachen und semantischen 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;
}

Ooh, figcaption, ist mir neu.

InformationsquelleAutor

Verwenden position:absolute überlappen 2 divs. Sie haben zu spielen mit left und top Eigenschaften, um seine position anzupassen.

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

InformationsquelleAutor Chinmayee G

0

Müssen Sie das text-div in das div, das das Bild enthält.. dann oben und rechts auf 0px und position absolute. nehmen Sie einige Hinweise von hier: http://jsfiddle.net/U25XQ/1/

InformationsquelleAutor Ravindra Sane
0

Folgende Beispiel zeigt, wie dies getan werden kann, bitte lassen Sie mich wissen, wenn es nicht das ist was du meinst: Beispiel.

InformationsquelleAutor Cpt. eMco

z-index funktioniert nur bei positionierten Elementen (position: (absolute|fixed|relative)). Also, Sie haben zu position Ihre Elemente. 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>

funktionieren sollte.

Viel zu viele Elemente, wenn.

InformationsquelleAutor gregor

0

Für das schreiben von text-über Bild-Sie setzen Bild im hintergrund Stil-und alt-text wie diesen-
```
<img scr="" alt="text"/>
<style>
.img{background-image:url('IMAGE_URL'); }
</style>
```
InformationsquelleAutor Aman Yadav

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.