Html 覆盖div或image以显示不使用伪元素的文本

我想显示图像和文本之间的透明背景覆盖，以便文本可读

由于某些原因，我尝试了下面的代码，它不适用于容器或图像

.container{
最大宽度：1000px；
位置：相对位置；
文本对齐：居中；
颜色：白色；
}
.左下角{
位置：绝对位置；
底部：8px；
左：16px；
}
.左上角{
位置：绝对位置；
顶部：8px；
左：16px；
}
.右上角{
位置：绝对位置；
顶部：8px；
右：16px；
}
.右下角{
位置：绝对位置；
底部：8px；
右：16px；
}
.居中{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.container>img:：在{位置：绝对；背景色：红色；宽度：100%；高度：100px；}之前
/*.container:：在{位置：绝对；背景色：红色；宽度：100%；高度：100px；}之前
.container:：在{位置：绝对；背景色：红色；宽度：100%；高度：100px；}*/

左下角
左上角
右上角
右下角
居中的

：之前和之后：仅使用未更换的元件

您可以从这里清除：

这是你的解决方案

我只是用div包装了图像，并在其上应用pseudo

希望它能帮助你

.img\u容器{
位置：相对位置；
z指数：0；
}
.img_容器：之前{
位置：绝对位置；
背景色：rgba（255,0,0,0.5）；
宽度：100%；
身高：100%；
内容：“；
z指数：1；
}
.集装箱{
最大宽度：1000px；
位置：相对位置；
文本对齐：居中；
颜色：白色；
}
.左下角{
位置：绝对位置；
底部：8px；
左：16px；
}
.左上角{
位置：绝对位置；
顶部：8px；
左：16px；
}
.右上角{
位置：绝对位置；
顶部：8px；
右：16px；
}
.右下角{
位置：绝对位置；
底部：8px；
右：16px；
}
.居中{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

左下角
左上角
右上角
右下角
居中的

内联元素不接受伪类。您可以使用

container div

，而不是使用

img

。检查下面的代码段

.container{
最大宽度：1000px；
位置：相对位置；
文本对齐：居中；
颜色：白色；
}
.左下角{
位置：绝对位置；
底部：8px；
左：16px；
}
.左上角{
位置：绝对位置；
顶部：8px；
左：16px；
}
.右上角{
位置：绝对位置；
顶部：8px；
右：16px；
}
.右下角{
位置：绝对位置；
底部：8px；
右：16px；
}
.居中{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.container:：在{位置：绝对；背景色：rgba（255,0,0,0.5）；宽度：100%；高度：100%；内容：'}
/*.container:：在{位置：绝对；背景色：红色；宽度：100%；高度：100px；}之前
.container:：在{位置：绝对；背景色：红色；宽度：100%；高度：100px；}*/

左下角
左上角
右上角
右下角
居中的

@fcalderan，我试图让它在图像或容器上工作，但它在任何一种情况下都不工作，所以问题是重复的..您需要将顶部/左侧值设置为0，并在容器和伪元素之间没有空格的地方使用上一个代码，不要忘记

内容：“

@TemaniAfif，我知道我错过了一些非常基本的东西。。。将此添加为解决方案，以便我可以将其标记为正确。。