在图像上的CSS网格中放置文本 [英] Position text in a CSS grid over an image

问题描述

我有一个CSS网格，我需要在图像上放置一些文本.下面显示了我在图像上没有文本的情况下使用的代码.

I have a CSS grid where I need to place some text over an image. Below is shown the code I use without text over the image.

.sbp-item12 {
        grid-row: 6 / 7;
        grid-column: 9/13;
        height: 250px;
    }

<div class="sbp-item12">
    <a href="#">
       <h3>Here is a headline</h3>
       <figure>
          <img src="https://placehold.it/380x250">
       </figure>
    </a>
 </div>

我尝试将以下内容添加到代码中，但是文本进入页面的底部，并且不停留在网格项内.有人知道我如何在网格项目中的图像上放置文本吗?

I tried to add the following to the code, but then the text is going in the bottom of my page, and is not staying inside the grid item. Does anybody have an idea how I can place text over the image in my grid item?

.sbp-item12 {
    grid-row: 6 / 7;
    grid-column: 9/13;
    height: 250px;
}

.bottom-left {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 0;
    right: 0;
    bottom: 0;
}

<div class="sbp-item12">
    <a href="#">
        <div class="text-bottm-left">
            <h3>Here is a headline</h3>
        </div>
        <figure>
            <img src="https://placehold.it/380x250">
        </figure>
    </a>
</div>

推荐答案

您需要设置父 position:relative 并为设置 position:absolute 您要放置在左下处的div .
注意:您的 Html 和 css 类不匹配.您需要更正它们.以下是有效的代码段

You need to set parent position:relative and set the position:absolute for the div which you want to place at bottom-left.
Note: Your Html and css classes doesn't match. You need to correct them. Below is the working snippet

.sbp-item12 {
  grid-row: 6 / 7;
  grid-column: 9/13;
  height: 250px;
}

figure {
  margin: 0;
  position: relative
}

.bottom-left h3{
  z-index: 100;
  position: absolute;
  color: black;
  font-size: 24px;
  font-weight: bold;
  left: 0;
  bottom: 0;
  margin:0
}

<div class="sbp-item12">
  <a href="#">
    <figure>
      <img src="https://placehold.it/380x250">
      <div class="bottom-left">
        <h3>Here is a headline</h3>
      </div>
    </figure>
  </a>
</div>

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