在图像上放置文字答案

【问题标题】：Place text on image在图像上放置文字
【发布时间】：2018-02-04 06:33:06
【问题描述】：

我已经搜索了答案，但找不到适合我的答案。

如何在图片顶部显示“HEY YOU”文字？

HTML：

<div class="row gallery_container">
    <div class="sort_item study">
      <a><img src="images/city_1.jpg"  class="gallery_project" style="width: 200px; height:200px;"/>
       <div class="gallery_text">
              <h2>HEY</h2>
              <span>YOU</span>
        </div>
      </a>
    </div>
</div>

CSS：

.gallery_container {
    width: 850px;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
}


.sort_item {
    box-sizing: border-box;
    float: left; 
    padding: 4px;
    width: 25%;
}

我在.gallery_project 上尝试过position:relative，在.gallery_text 上尝试过position:absolute。

还尝试制作容器和.sort_itemposition:relative（不是同时）

【问题讨论】：

标签： html css

【解决方案1】：

这样的事情怎么样：http://jsfiddle.net/EgLKV/3/

通过使用position:absolute 和z-index 将文本放置在图像上来完成。

.gallery_container {
  width: 850px;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
}

.sort_item {
  box-sizing: border-box;
  float: left; 
  padding: 4px;
  width: 25%;
  position: relative;
}

.gallery_text {
  position: absolute;
  z-index: 10;
  top: 0;
}

<div class="row gallery_container">
      <div class="sort_item study">
          <a><img src="images/city_1.jpg"  class="gallery_project" style="width: 200px; height:200px;"/>
           <div class="gallery_text">
                  <h2>HEY</h2>
                  <span>YOU</span>
            </div>
          </a>
      </div>

【讨论】：

【解决方案2】：

这里有一个解决方案https://jsfiddle.net/19gqkhvt/

.gallery_container {
  width: 850px;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
}

.sort_item {
  box-sizing: border-box;
  float: left; 
  padding: 4px;
  width: 25%;
  position: relative;
}

.gallery_text {
  position: absolute;
  z-index: 10;
  top: 0;
}

<div class="row gallery_container">
<div class="sort_item study">
  <a><img src="http://via.placeholder.com/350x150"  class="gallery_project" style="width: 200px; height:200px;"/>
   <div class="gallery_text">
      <h2>HEY</h2>
      <span>YOU</span>
    </div>
  </a>
</div>

将（图像和文本）的父 div 设为position: relative。将position: absolute 和top:0 提供给文本。

希望这会对你有所帮助。

【讨论】：