时间戳

首页 > 解决方案 > 特定 div 中前面的文本和后面的背景图像

html - 特定 div 中前面的文本和后面的背景图像

问题描述

我正在尝试创建一个具有前端文本和背景图像的 div。

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

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

这是我得到的结果。

但我想从 Microsoft word 中得到类似的东西。

我希望有人帮助我。先感谢您

标签： htmlbackground-image

解决方案

这是一种使用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>

推荐阅读