Wie platziere ich einen Text über das Bild in div mit transparentem Layout?

Question

Ich versuche, Text innerhalb des Bildes zu platzieren, wie in der unten abgeschnittenen, aber mit divs, skalierbares Layout für Text und größenverstellbarem Text.

So:

h3 { 
 
    word-break: break-word; /* non standard for webkit */ 
 
-webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
     hyphens: auto; 
 
} 
 
.img{ 
 
width:640px; 
 
height:100%; 
 
} 
 
.image { 
 

 
    position: relative; 
 
    width: auto; /* for IE 6 */ 
 
    max-height: 640px; 
 
} 
 

 
h2{ 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    padding-bottom: 10px; 
 
    padding-top: 10px; 
 
    position: absolute; 
 
    bottom:-15px; 
 
    left: 0; 
 
    width: 600px; 
 
    color:white; 
 
}

<div class="image"> 
 
     <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
 
     <h2 lang="en">A Movie in the Park: Kung Fu Panda</h2> 
 
</div> 
 
<div class="image"> 
 
     <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
 
     <h2 lang="en">A Movie in the Park: Kung Fu Panda saasffdafadfadfda</h2> 
 
</div> 
 
<div class="image"> 
 
     <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
 
     <h2 lang="en">Incomprehensibilities ffafefeafea fefeefes gregrgregregerge</h2> 
 
</div>

Hier ist, was ich ansprechende Version ohne Text und Layout auf der Bild bekam:

* { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
html { 
 
    font-family: sans-serif; 
 
} 
 
body { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.wrapper { 
 
    overflow: hidden; 
 
    margin: auto; 
 

 

 
} 
 
div > div { 
 

 
    margin: 0.5rem; 
 
    float:left; 
 
} 
 
div:nth-child(4n){ 
 
    clear: left; 
 
} 
 
img{ 
 
    width: 256px; 
 
    max-height: 100%; 
 
} 
 

 
.note { 
 
    width: 100%; 
 
    padding: 0; 
 
    background-color: #000; 
 
    color: #eee; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
@media(max-width: 1024px){ 
 
    div:nth-child(2n + 3){ 
 
    clear: left; 
 
    } 
 
    div:nth-child(4n){ 
 
    clear: none; 
 
    } 
 
    .note { 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    } 
 
}

<div class="note">Resize viewport to change layout</div> 
 
<div class="wrapper"> 
 
    <div><img src="http://i.imgur.com/VCsr2MH.png" alt=""/></div> 
 
    <div><img src="http://i.imgur.com/VCsr2MH.png" alt=""/></div> 
 
    <div><img src="http://i.imgur.com/VCsr2MH.png" alt=""/></div> 
 
    <div><img src="http://i.imgur.com/VCsr2MH.png" alt=""/></div> 
 
    <div><img src="http://i.imgur.com/VCsr2MH.png" alt=""/></div> 
 
    <div><img src="http://i.imgur.com/VCsr2MH.png" alt=""/></div> 
 
</div>

Zusätzlich gibt es ein Problem mit der Größenanpassung von Bildern (Größe), wenn sie im Responsive Snippet kein Teiler der Zahl 1024 sind.

Answer 1

Wenn Sie nur ein responsives Layout mit Text über den Bildern wünschen, können Sie einfach den Text in ein absolut positioniertes div innerhalb des Elements einfügen. Beachten Sie, dass sich der Div-Text in den jeweiligen Elementen und auf den Bildern befindet.

* { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
html { 
 
    font-family: sans-serif; 
 
} 
 
body { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.wrapper { 
 
    overflow: hidden; 
 
    margin: auto; 
 
    background-color: #c06; 
 
} 
 
div > div { 
 
    width: 9rem; 
 
    margin: 0 0.125rem; 
 
    background-color: #c06; 
 
    float:left; 
 
    position: relative; 
 
} 
 
div:nth-child(4n){ 
 
    clear: left; 
 
} 
 

 
.note { 
 
    width: 100%; 
 
    padding: 1rem; 
 
    background-color: #000; 
 
    color: #eee; 
 
    text-align: center; 
 
    position: absolute; 
 
    z-index: 10; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
} 
 
div div:nth-child(1) img{ 
 
    filter: grayscale(100%); 
 
} 
 
div div:nth-child(3) img{ 
 
    filter: brightness(150%); 
 
} 
 
div div:nth-child(4) img{ 
 
    filter: hue-rotate(205deg); 
 
} 
 
div div:nth-child(5) img{ 
 
    filter: saturate(250%); 
 
} 
 
div div:nth-child(6) img{ 
 
    filter: invert(100%); 
 
} 
 
.txt { 
 
    background-color: transparent; 
 
    color: #eee; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    text-align: center; 
 
    font-size: 2rem; 
 
    text-shadow: 0 0 0.5rem #000; 
 
} 
 
@media(max-width: 1025px){ 
 
    div:nth-child(2n + 3){ 
 
    clear: left; 
 
    } 
 
    div:nth-child(4n){ 
 
    clear: none; 
 
    } 
 
    .note { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    } 
 
}

<div class="note">Resize viewport to change layout</div> 
 

 
<div class="wrapper"> 
 
    <div> 
 
    <img src="http://i.imgur.com/iyzGnF9.jpg"> 
 
    <div class="txt">div text 1</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://i.imgur.com/iyzGnF9.jpg"> 
 
    <div class="txt">div text 2</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://i.imgur.com/iyzGnF9.jpg"> 
 
    <div class="txt">div text 3</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://i.imgur.com/iyzGnF9.jpg"> 
 
    <div class="txt">div text 4</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://i.imgur.com/iyzGnF9.jpg"> 
 
    <div class="txt">div text 5</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://i.imgur.com/iyzGnF9.jpg"> 
 
    <div class="txt">div text 6</div> 
 
    </div> 
 
</div>