在图像上放置文字 [英] Place text on image

问题描述

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

I have searched for an answer but can't find one that works for me.

如何在图像顶部显示"HEY YOU"字样?

How do I get the "HEY YOU" text on top of the image?

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 .

I have tried position:relative on .gallery_project and position:absolute on .gallery_text.

还尝试制作容器和 .sort_item position:relative (不是同时)

Also tried making the container and .sort_item position:relative (not at the same time)

推荐答案

在这里您可以找到解决方案 https://jsfiddle.net/19gqkhvt/

Here you go with a solution 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 .

Make the parent div of (image & text) as position: relative. Provide position: absolute and top:0 to text.

希望这会对您有所帮助.

Hope this will help you.

这篇关于在图像上放置文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！