在特定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

这是一种使用.load()和单个html元素的方法。

background-image

.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);
}