Question

我将文字和背景分为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;
}

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

Answer 1

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

E.g。如果您为父母宣布opacity:0.75，则每个孩子只有75％不透明，但如果您决定进一步降低其不透明度，也可以降至0％。经过一段时间的思考，这听起来有点合乎逻辑，对吗？

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

对于颜色，请使用相应的color notations：rgba或hsla。 Alpha通道a描述了不透明度：

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

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

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

Answer 2

而不是opacity，您可以使用rgba其中

r = red

g =绿色

b =蓝色

a =不透明度

以下是Demo

Answer 3

你声明的这种方式不起作用，因为作为内部div的子节点将继承不透明度。这是你可以做到的方法之一：

 <div class="mainDiv">
    <div class="transparentDiv">
    </div>
    <div class="textDiv">
      <h1>My text</h1>
    </div>
</div>

和css将是：

.transparentDiv {
    height: 30px;
    background-color: #00B7FF;
    opacity: 0.3;
}
.textDiv {
    top: 10px;
    position: absolute;
}

您可以更改高度和顶部属性以将其设置为所需位置。

文本不透明时的不透明背景

3 个答案: