透明度和文字问题

Posted 2023-03-06

【中文标题】透明度和文字问题

【英文标题】：transparency and text problem

【发布时间】：2011-06-14 21:14:44

【问题描述】：

我正在使用opacity CSS 属性。

它非常适合方框（50% 或黑色 30%） - 问题是方框内的文本也是透明的。

我希望文本在 30% 透明度的框中为 100% 白色。

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

告诉我，如何用 100% 不透明度的文本来实现 30% 的不透明度。

提前致谢

【参考方案1】：

您的选择是：

Using CSS3：background: rgba(255, 255, 255, 0.3)。

Live Demo

绝对将两个<div>标签放在一起。其中之一是背景，具有opacity 设置。第二个包含文本，以及transparent 背景。 正如您在问题中所暗示的那样，您可以使用具有 30% 透明度的 .png 文件。

---

我知道我读到了一种使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)";

【讨论】：

IE 实际上有自己的rgba-like 属性使用过滤器。这是一个有用的生成器：kimili.com/journal/…

@mqchen：谢谢。这看起来是为 IE 过滤器生成 startColorstr 和 endColorstr 的一种非常简单的方法。

【参考方案2】：

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

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