html - 不透明度在 div 中也有不透明度内容？

Question

html: :

<div id="Opacity"><span class="P">Here Is My P</span>

CSS：

#opacity {
width:400px;
height:400px;
border:black 1px solid;
opacity:0.3;
background-color:black;
}

.P {
font-family:cursive;
font-size:24px;
color:white;
}

但输出单词也是透明的。我希望单词透明但 div 变得透明谢谢

Answer 1

opacity改变整个元素的半透明度。

如果您想要半透明背景，则将背景设置为rgba()颜色值或使用半透明背景图像。

background-color: rgba(0, 0, 0, 0.3);

请参阅有关兼容性措施的一些指南。