不透明度应该只影响父母，但不影响孩子

Question

我有一个div，其中包含图片上的文字，而我想要达到的目的是降低div的不透明度，以便清楚地看到图像。

使用我当前的脚本，当我降低div的不透明度时，它也会影响文本。

但我希望它只影响div

CSS

.page1_text {
        position:absolute;
        background-color:#CC3;
        border-radius:5px 5px 5px 5px;
        padding:20px;
        width:80%;
        left:10%;
        font-size:16px;
        opacity: 0.5;
}

HTML

<div class="page1_text">
    <div>This is my test </div>
</div>

Answer 1

如果在div上使用不透明度，则会影响div中的所有内容

将背景颜色与alpha

一起使用

background-color: rgba(204, 204, 51, 0.5);

最后的0.5是alpha（不透明度），我使用photoshop获取了值，但我确信还有其他方法可以将hex转换为rgb

有关详细信息，请参阅https://css-tricks.com/rgba-browser-support/