Html 不透明度容器中的不透明度文本

我有一个黑色覆盖的

img

。覆盖层中有一个

不透明度和一个白色文本。当我将鼠标悬停在包装器上时，会看到一个带有不同透明度的红色覆盖层，并且文本可见。一切正常。我唯一的问题是，删除覆盖层中文本的
不透明度
。文本是白色的，但也是透明的。如何将文本放在透明容器中，而不对字母/文本产生透明效果？我知道，如果我将文本从这个框中取出，并在中间设置一个样式，id就会起作用。但我希望文本元素位于透明容器中。希望这足够清楚。有什么想法吗


.wrapper{
位置：相对位置；
宽度：300px；
高度：200px；
}
.覆盖{
宽度：100%；
身高：100%；
位置：绝对位置；
显示器：flex；
文本对齐：居中；
证明内容：中心；
对齐项目：居中；
光标：指针；
}
.覆盖黑色{
背景：黑色；
不透明度：0.4；
}
.覆盖红色{
背景：红色；
不透明度：0.8；
显示：无；
}
.wrapper:悬停。覆盖黑色{
显示：无；
}
.wrapper:悬停。覆盖红色{
显示器：flex；
}
h2，
p{
颜色：白色；
}
img{
宽度：100%；
身高：100%；
}

尤达
愿原力与你同在

关键部分是：

.overlay-black {
  background: rgba(0,0,0,0.4);
}

请看下面的片段，我相信/希望这是您所期望的


.wrapper{
位置：相对位置；
宽度：300px；
高度：200px；
}
.覆盖{
宽度：100%；
身高：100%；
位置：绝对位置；
显示器：flex；
文本对齐：居中；
证明内容：中心；
对齐项目：居中；
光标：指针；
}
.覆盖黑色{
背景：rgba（0,0,0,0.4）；
}
.覆盖红色{
背景：红色；
不透明度：0.8；
显示：无；
}
.wrapper:悬停。覆盖黑色{
显示：无；
}
.wrapper:悬停。覆盖红色{
显示器：flex；
}
h2，
p{
颜色：白色；
}
img{
宽度：100%；
身高：100%；
}

尤达
愿原力与你同在

关键部分是：

.overlay-black {
  background: rgba(0,0,0,0.4);
}

请看下面的片段，我相信/希望这是您所期望的


.wrapper{
位置：相对位置；
宽度：300px；
高度：200px；
}
.覆盖{
宽度：100%；
身高：100%；
位置：绝对位置；
显示器：flex；
文本对齐：居中；
证明内容：中心；
对齐项目：居中；
光标：指针；
}
.覆盖黑色{
背景：rgba（0,0,0,0.4）；
}
.覆盖红色{
背景：红色；
不透明度：0.8；
显示：无；
}
.wrapper:悬停。覆盖黑色{
显示：无；
}
.wrapper:悬停。覆盖红色{
显示器：flex；
}
h2，
p{
颜色：白色；
}
img{
宽度：100%；
身高：100%；
}

尤达
愿原力与你同在

您可以使用rgba颜色作为背景，这样就不需要设置不透明度：例如
背景：rgba（0,0,0,0.4）
将是一个不透明度为0.4的黑色背景-更多信息：@Pete perfekt，效果很好-谢谢！）不客气，很高兴我能帮你：）你可以使用rgba颜色作为背景，这样你就不需要设置不透明度：例如
背景：rgba（0,0,0,0.4）
将是一个不透明度为0.4的黑色背景-更多信息：@Pete perfekt，效果很好-谢谢！）不客气，很高兴我能帮上忙：）（啊，@Pete的评论速度更快。不过我会把它放在这里，用于运行代码段功能）很好，谢谢：）（啊，@Pete的评论速度更快。不过我会把它放在这里，用于运行代码段功能）很好，谢谢：）