如何使用布局透明布局将文本置于div内的图像顶部？

Question

我试图将文本放置在图像中，就像在剪下的下面，但使用divs，文本和可调整大小的文本的可缩放布局。

像这样：

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>

以下是我对图像的顶部得到了响应的版本没有文字和布局：

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

此外，当它们不是响应片段中的数字1024的分隔符时，调整图像大小（大小）时会出现一些问题。

Answer 1

如果你想要的只是一个在图像上有文字的响应式布局，你可以简单地将文本添加到元素中绝对定位的div上。注意div文本是如何在它们各自的元素内部和图像之上的。

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