Html 带有不透明文本的图像悬停覆盖

我想做的是创建一个图像悬停效果，当你悬停在图像上时，覆盖层是不透明的，上面是普通文本。现在，文本和背景是不透明的

我尝试过很多方法，从z-index到使用CSS更改文本的不透明度，但似乎没有任何方法可以解决这个问题

.text{
颜色：白色；
字体大小：20px；
位置：相对位置；
宽度：425px；
高度：300px；
溢出：滚动；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
不透明度：1.0；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#000000；
z指数：-3.0；
}
.container:悬停。覆盖{
不透明度：.5；
}

．：．Ａｐｐｅａｒａｎｃｅ．：．

问题出在属性

不透明度中。
如果将不透明度值指定给元素，则该值也将应用于该元素中的所有子元素，在本例中，将应用于
.text
和
h3

您可以通过使用
rgba（）
作为
.overlay
的背景色，并调整其中的不透明度来解决此问题，因此它将仅应用于此元素

这是一本书


body，html{
身高：100%；
宽度：100%；
保证金：0；
/*背景：#20262E*/
}
.文本{
颜色：白色；
字体大小：20px；
位置：相对位置；
宽度：425px；
高度：300px；
溢出：滚动；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
不透明度：0；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
过渡：放松；
背景色：rgba（0,0,0,0）；
z指数：-3.0；
}
.container:悬停。覆盖{
背景色：rgba（0,0,0,5）；
}
.container:hover.text{
不透明度：1；
}

．：．Ａｐｐｅａｒａｎｃｅ．：．
您必须发布覆盖（和悬停）css，以便我们也能看到。这就是您的问题可能出现的地方..覆盖{位置：绝对；顶部：0；底部：0；左侧：0；右侧：0；高度：100%；宽度：100%；不透明度：0；过渡：5s轻松度；背景色：#000000；z-index:-3.0；}容器：悬停。覆盖{不透明度：.5；}您可以编辑您的问题以添加代码吗？然后将其格式化为代码对不起，这是我第一次使用此网站。成功了！！非常感谢你！我做错了什么？我注意到你有一个用于悬停的容器。那么这就是我错过的吗？