我将文本和背景分为2个div：一个用于透明背景，另一个用于实际内容。
随后，进行了搜索，结果尝试了一下.innerDiv { position: relative}。它仍然没有工作。
HTML：
<div id="container">
<div id="content">
<h1> Hello </h1>
</div>
</div>
CSS：
#container
{
margin: auto;
background-color: white;
opacity: 0.3;
height: 90%;
width: 80%;
font-size: 30px;
}
#content {
position: absolute;
font-size: 20px;
}
PS：插入opacity 0.9;到#content确实改变透明度不过1仍然不是100％永久的。
opacity是继承的，因此如果将父级的透明度更改为小于1，则所有子元素将具有相同的透明度。您可以进一步降低子元素的不透明度，但是“总”不透明度值永远不能高于其父元素的不透明度值。
例如，如果您opacity:0.75为父母声明，每个孩子的不透明度也只有75％，但是如果您决定进一步降低其不透明度，也可能降至0％。经过一段时间的思考，这听起来很合逻辑，对吗？
您可以通过其他几种方式解决您的问题：
对于颜色，请使用相应的颜色符号：rgba或hsla。Alpha通道a描述了不透明度：
#container{
background-color: rgba(255,255,255,.3); /*30% opaque white*/
}
对于图像，请首先使用半透明图像或透明滤镜filter: opacity(30%);。
对于背景图像，请为父级使用相应放置的伪元素，并使用regular opacity。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句