Question

任何人都知道如何在桌面上显示文字图片，在手机上方的图片上方显示文字div？

此代码在小分辨率上的图像下显示文本-div。

.image-container {
  position:relative;
  width:100%;
  height:100%;
  }

.image-container img {
 width: 100%;
 vertical-align: top;
 }

 .image-container:after {
  content: '\A';
  position: absolute;
  width: 100%; height:100%;
  top:0; left:0;
  background:rgba(0,0,0,0.3);
  opacity: 1;
  transition: all 1s;
 -webkit-transition: all 1s;
   }

   .text-after {
     width:100%;
     height:auto;
     color:#000;
     position:absolute;
     top: 50%;
     left: 30%; 
    }




   @media screen and (max-width: 980px) {
   .text-after {
   position:relative;
    width:100%;
    height:auto;
    color:#000;
   }

<div class="image-container">
<img src="images/family.jpg" alt="family">

</div>
<div class="text-after">
 <p class="family-header">Lorem ipsum dolor sit ametin orci risus est</p>
<p class="family-content">Lorem ipsum dolor sit amet, in orci risus est</p>
  <p class="family-content">Lorem ipsum dolor sit amet, in</p>
</div>

Answer 1

好吧，我认为您正在询问如何在图像上显示文字
将图像作为包装div的背景图像将更容易，但在这种情况下，我将图像视为内容，因此属于HTML。我们将包装div用作绝对定位的容器。

要添加的CSS

＆＃13;

.image {
  position: relative;
  width: 100%;
  /* for IE 6 */
}

h2 {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
}

h2 span {
  color: white;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

＆＃13;

<div class="image">

  <img src="http://www.webclasses.in/wp-content/uploads/2015/08/HTML.jpg " alt="" />

  <h2><span>This is just Test <br />A Message</span></h2>

</div>

＆＃13;

您可以根据需要自定义文本字体，大小和其他属性。

文字结束和图像

1 个答案: