Html 不使用相对父对象和填充子对象的覆盖

考虑以下示例，该示例将半透明的红色层渲染到某些文本上

福


酒吧

< /代码> 您可以考虑主元素上的背景并将子元素放在后面。

.box{
背景：rgba（255,0,0,0.5）；
}
.box>*{
位置：相对位置；
z指数：-1；
}
.box:悬停{
背景：rgba（255,0,0,0.8）；
}


福


酒吧

看起来很棒。孩子使用的是relative，让我们看看在iOS Safari中使用这种方法是否还能看到片状。我在问题中添加了一条关于悬停的注释。请您修改您的答案，并在其中添加“.box:hover{background:rgba（255,0,0,0.8）；}”。这显示了效果，效果非常好！非常感谢！我现在仔细检查了iOS Safari。当我在树中的某个地方引入“relative”时，元素仍然会随机消失。。。