Html 如何在CSS中增加悬停图像的不透明度

我需要帮助，以增加不透明度的图像显示，而悬停在一个文本。但是，当按如下方式操作时，也会显示背景文本。下面是截图

我不想看到背景文本

下面是代码

 <div class="hover-title">Image1 Hover Test<br>
<br>
</div>
<div class="hover-image">{image 1}</div>

悬停前：

悬停后：

---

在css中，将.hover image的z索引更改为2。

您需要两者，之前的z索引是将某物从后向前移动

稍后要更改不透明度，可以使用以下方法在图像上添加颜色层：

背景色：rgba7,52,76,5

需要是RGB才能是半透明的

这里有更多关于这方面的信息：

---

我希望这有助于

了解您所说的背景文本是什么意思？更改z索引确实有效，感谢您的回答：更改z索引确实有效，感谢您的回答：您可以为可能正在搜索此问题的其他人正确标记此答案。

.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
    display: none;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    display: flex;
    pointer-events: none;
}

.hover-image {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: 90vw;
    height: 90vh;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}