如何使用布局透明布局在div中的图像顶部放置文本？

Question

我正在尝试将文本放置在图像中，如下图所示，但使用div，可缩放的文本布局和可调整大小的文本。

像这样：

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文本如何位于各自的元素内以及图像的顶部。

＆＃13;

＆＃13;

* {
  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 );
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;