Überlagert ein Div mit einem Hintergrund-Bild über ein div mit einem Foto, und es

Ich versuche, eine overlay-div hat ein Hintergrundbild in der es über ein div-Element enthält ein Foto mit einem image-tag. Das div mit dem Hintergrundbild ist notwendig, da eine # erscheint in der div über das bg Bild und diese beiden werden werden oben auf dem Foto.

In einfachen Worten: ich versuchte eine div über anderen div. Sorry, ich bin nicht in der Lage zu absoluten Pfad der Bilder noch nicht, aber ich vermute es wird ein Konzept funktioniert unabhängig.

Code, den ich habe ist:

<div id="contestLeaders">
    <div class="leader"><img src="css/images/chili-photo.jpg" width="138" height="138" /></div>
    <div class="leader"><img src="css/images/chili-photo2.jpg" width="138" height="138" /></div>
    <div class="leader"><img src="css/images/chili-photo3.jpg" width="138" height="138" /></div>
    <div class="leader"><img src="css/images/chili-photo4.jpg" width="138" height="138" /></div>
    <div class="leader"><img src="css/images/chili-photo5.jpg" width="138" height="138" /></div>
</div>
<div class="leaderRating">5.0</div>

CSS:

#contestLeaders {overflow:hidden;}
#contestLeaders .leader {float:left; margin-right:4px;}
.leaderRating {background:url(images/leader-rating-bg.png) no-repeat; width:138px; height:37px; color:#fff;font-size:18px;padding:10px 0px 0px 35px;}

Ihre unter-Verlegung von div muss eine andere position als statisch, und Ihre überlagerung dann die position absolute.

InformationsquelleAutor Deep Rooted | 2012-08-02

1

Ich nehme an, du willst .leaderRating DIV-Element auf der Oberseite des anderen DIV ' s mit Bildern.
Um dies zu erreichen, versuchen Sie die folgenden änderungen vor:
- setzen Sie die überlagerung von DIV - (.leaderRating) innerhalb der main-container (#contestLeaders)
- fügen Sie den folgenden CSS-Stile: { position: relative; } für den container und den { position: absolute; top: 0; } für das overlay
Diese Weise sind Sie die absolute Positionierung der Overlays in Bezug auf die container.
Am Ende, Sie sollte kommen mit dem folgenden code:

HTML:

<div id="contestLeaders"> <div class="leader"><img src="css/images/chili-photo.jpg" width="138" height="138" /></div> <div class="leader"><img src="css/images/chili-photo2.jpg" width="138" height="138" /></div> <div class="leader"><img src="css/images/chili-photo3.jpg" width="138" height="138" /></div> <div class="leader"><img src="css/images/chili-photo4.jpg" width="138" height="138" /></div> <div class="leader"><img src="css/images/chili-photo5.jpg" width="138" height="138" /></div> <div class="leaderRating">5.0</div> </div>

CSS:
```
 
#contestLeaders {overflow:hidden; position: relative; } 
#contestLeaders .Führer {float:left; margin-right:4px;} 
.leaderRating {background:url(images/leader-Bewertung-bg.png) no-repeat; width:138px; height:37px; color:#fff;font-size:18px;padding:10px 0px 0px 35px; position: absolute; top: 0; } 
```
- Ich habe versucht mit diesem fix oben und, wenn ich habe es auf meinen css meine Elemente ging von der Ausrichtung von Links nach rechts horizontal zu stapeln auf der linken Seite vertikal. Ich war auch nicht in der Lage, um zu sehen, das bg Bild-overlay. Könnte dies damit zu tun haben .leader positionieren? Ich sollte auch beachten, dass ich versuche, das leaderRating erscheinen über jedem .Leiter div. denn jede Bewertung wird für jedes Bild unterschiedlich
- War in der Lage, es zu beheben als solche:#contestLeaders {overflow:hidden;margin-bottom:30px;position: relative;} .Führer {float:left; margin-right:4px;} .leaderRating {background:url(images/leader-Bewertung-bg.png) no-repeat; width:138px; height:37px; color:#fff;font-size:18px;padding:10px 0px 0px 35px;position: absolute;top:90px;}
InformationsquelleAutor Gabriel

Vielen Dank für jedermanns Hilfe. Dies ist, wie ich es geschafft, damit es funktioniert:

CSS

#contestLeaders
{
    overflow:hidden;
    margin-bottom:30px;
    position: relative;
}
.leader
{
    float:left;
    margin-right:4px;
}
.leaderRating
{
    background:url(images/leader-rating-bg.png) no-repeat;
    width:138px;
    height:37px;
    color:#fff;
    font-size:18px;
    padding:10px 0px 0px 35px;
    position: absolute;
    top:90px;
}

HTML

<div id="contestLeaders">
    <div class="leader"><div class="leaderRating">5.0</div><img src="css/images/chili-photo.jpg" width="138" height="138" /></div>
    <div class="leader"><div class="leaderRating">4.7</div><img src="css/images/chili-photo2.jpg" width="138" height="138" /></div>
    <div class="leader"><div class="leaderRating">4.2</div><img src="css/images/chili-photo3.jpg" width="138" height="138" /></div>
    <div class="leader"><div class="leaderRating">3.5</div><img src="css/images/chili-photo4.jpg" width="138" height="138" /></div>
    <div class="leader"><div class="leaderRating">2.8</div><img src="css/images/chili-photo5.jpg" width="138" height="138" /></div>
</div>

mit "top" der css-Eigenschaft behoben das Problem, das ich konfrontiert war. ich danke Ihnen sehr.

InformationsquelleAutor Deep Rooted

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.