为什么文本的颜色会在透明的DIV标签中发生变化？

Question

您好，请您查看下面的考试（代码和链接），让我知道为什么透明div中其他元素的颜色也会发生变化，以及如何防止这种情况发生？我的意思是我喜欢我已经指定的文本框和字体颜色，但现在它们看起来是灰色的！

Here is the link

正如您从链接中看到的那样，文本框内的输入颜色变为灰色！ 这个代码：

.test
{
    color:#FFF;
    border: solid 2px #2d2d2d;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 180px;
    width: 250px;
    filter: alpha(opacity=60);
    opacity: 0.60;
    background: #000;
}

Answer 1

在元素上使用opacity也会影响所有子元素。这就是为什么你的文字看起来很灰的原因。为防止这种情况，请使用RGBA颜色并同时设置透明度值。

我创建了一个显示差异的小demo。

这是background的代码。

background: rgba(0, 0, 0, 0.6); /* The last value declares the transparency */ 

希望这有帮助！

Answer 2

白色变为灰色，因为您在黑色背景下将某些东西的不透明度设置为60％。删除不透明度规则，它应该看起来像你期望的那样。

删除这些CSS规则

filter: alpha(opacity=60);
opacity: 0.60;