html - 不透明背景，而文本不透明

Question

我将我的文本和背景分为 2 个 div:一个用于透明背景，另一个用于实际内容。

随后，进行了搜索，结果是 try .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;
}

P.S:将 opacity 0.9; 插入 #content 确实改变了透明度，但是 1 仍然不是 100% 永久的。

Answer 1

opacity 是继承的，因此如果您将父元素的不透明度更改为低于 1，则所有子元素都将具有相同的不透明度。您可以进一步降低子元素的不透明度，但是“总”不透明度值永远不能高于其父元素的不透明度。

例如如果您为您的父级声明了 opacity:0.75，则每个子级也只有 75% 不透明，但如果您决定进一步降低其不透明度，也可以降至 0%。仔细想想，这听起来有点合乎逻辑，对吧？

您可以通过其他几种方式解决您的问题:

对于颜色，使用根据 color notations : rgba 或 hsla。 Alpha channel a 描述了不透明度:

#container{
    background-color: rgba(255,255,255,.3); /*30% opaque white*/
}

对于图片，首先使用半透明图片，或者透明滤镜filter: opacity(30%);。

对于背景图像，为父级使用相应放置的伪元素并使用常规 opacity。