在特定 div 内前面的文字和后面的背景图像

Question

我正在尝试创建一个 div，其中包含正面文字和背景图片。

到目前为止，这是我的基本 html

<div>
    <img src="@userImage" width="90px" height="90px" />
    <div class="footer-field">Hello World</div>
</div>

这是我得到的结果。

但我想要 Microsoft word 中的类似内容。

我希望有人能帮助我。提前谢谢你

Answer 1

这里有一个方法 position: absolute

.image-container {
  position: relative;
  display: inline-block;
}

.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 30px;
}

<div class="image-container">
  <img src="https://placekitten.com/600/400" alt="">
  <div class="image-text">Centered text</div>
</div>

JSFiddle Demo

Answer 2

这是一种使用 background-image 和单个 html 元素的方法。

.footer-field {
    width: 190px;
    height: 190px;
    display: grid;
    align-items: center;
    text-align: center;
    color: red;
    background-size: cover;
    background-image: url(https://images.unsplash.com/photo-1559157693-c34156e0f8c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
}

<div class="footer-field">Centered Text</div>

在特定 div 内前面的文字和后面的背景图像

Text in front and image at background at back inside the specific div

html

background-image