无效文本不透明度

Question

在下面给出的代码中，我已将不透明度应用于中心的框，其中包含一些文字。现在我的问题是我不希望文本不透明。那么如何在不将其置于不同的<div>？

的情况下使文本不透明度无效

.r2{
    height:20%;
    width: 40%;
    background-color: #f3fafe;
    position: fixed;
    margin: 0 auto;
    top:40%;
    left:30%;
    opacity: 0.7;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 5px 5px 5px rgba(110,110,110,0.7);
    transition: transform 1s;   
}

这是我给盒子的风格。

Answer 1

如果我理解正确你想要淡化盒子而不是文本。这是通过将背景颜色更改为RGBA值来实现的。在你的情况下，rgba(243, 250, 254, 0.7)。另外，不要忘记将不透明度更改为1.0。

您当前的代码将变为：

.r2{
    ...
    background-color: rgba(243, 250, 254, 0.7);
    ...
    opacity: 1.0;
    ...
}