Question

我如何做以下事项：

.accept-overlay {
    width: 1120px;
    height: 518px;
    position: absolute;
    background: rgb(249, 180, 145);
    opacity: 0.3;
    border-radius: 4px;
}

<div class="accept-overlay">
    <span class="regular-opacity">Click Accept to View</span>
</div>

基本上，我希望叠加层的不透明度为0.30，但文本本身，＆＃34;点击接受查看＆＃34;应该是正常的黑色文字。我该如何做到这一点？

Answer 1

您不能使用不透明度，因为它会改变元素及其所有子元素的不透明度。

相反，您可以尝试使用rgba作为背景颜色。

.accept-overlay {
    width: 1120px;
    height: 518px;
    position: absolute;
    background: rgb(249, 180, 145, 0.3);
    border-radius: 4px;
}

Answer 2

使用rgba（）

＆＃13;

.accept-overlay {
    width: 1120px;
    height: 518px;
    position: absolute;
    background: rgba(249, 180, 145,0.3);
    border-radius: 4px;
}

＆＃13;

<div class="accept-overlay">
    <span class="regular-opacity">Click Accept to View</span>
</div>

＆＃13;

覆盖半透明背景，但文字完全不透明

2 个答案: