Question

我正在使用opacity CSS属性。

它适用于盒子（50％或黑色30％） - 问题是盒子里面的文字也透明。

我希望文本在一个透明度为30％的盒子中是100％白色。

解决方案是使用带有调整的CSS或使用.png作为背景并忘记opacity设置。

告诉我，如何在内部使用100％不透明度文本进行30％不透明度。

提前致谢

Answer 1

您的选择是：

Using CSS3：background: rgba(255, 255, 255, 0.3)。 Live Demo
绝对将两个<div>标签放在彼此的顶部。其中一个是背景，并具有opacity设置。第二个包含文本，transparent背景。
正如您在问题中所暗示的那样，您可以使用.png文件，30%透明度。

我知道我读过关于让rgba在IE中工作的方法。

请参阅：http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Answer 2

#box { color:white; background-color:rgba(0,0,0,0.3); }

注意：rgba在IE6-8中不起作用

透明度和文字问题

2 个答案: