Html 视图更改时文本未覆盖图像

我一直在寻找一个解决方案，我有一个图像上的文字顶部

我找到了类似的解决方案：

                        <div>
                            <div class="centered" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
                                No Events found
                            </div>
                            <img src="https://www.steelmint.com/nw/public/images/events-01.svg" alt="Snow" style="width:100%;
position:relative; text-align: center; opacity:0.4;">
                        </div>

未找到任何事件

现在我意识到由于

位置

样式，例如，如果我

• 放大/缩小
• 更改窗口高度/宽度
• 切换到智能手机视图

这通常是如何解决的，所以我的文字停留在我的图像

---

我的想法是创建一个图像，其中文本是图像的一部分，然后将该图像绑定到我的

-标记。这是一种常见的方法吗？

添加

z-index:20

到

.centered

分区。如下所示：

<div>
  <div class="centered" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index: 20;">
    No Events found
  </div>
  <img src="https://www.steelmint.com/nw/public/images/events-01.svg" alt="Snow" style="width:100%;
position:relative; text-align: center; opacity:0.4;">
</div>

未找到任何事件

代码笔：

---

只需在包装div上使用类，并给它一个

位置：relative如下面的示例所示。然后使用
position:absolute让带有文本的div跨越整个父div
与
上、下、左、右组合：0。
要添加不透明度效果，请改用rgba作为背景色。它不会导致与上次渲染的不透明度相同的问题。使用正的
z索引
在图像层上方跨越文本


.text图像包装器{
宽度：100%；
位置：相对位置；
对象匹配：包含；
}
.text图像包装器div{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
文本对齐：居中；
背景色：rgba（255、255、255、0.5）；
z指数：1；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.文本图像包装器img{
宽度：100%；
}

一些例文