使背景透明且文字不透明答案

【问题标题】：Make background transperent and text not使背景透明且文字不透明
【发布时间】：2014-04-29 17:04:06
【问题描述】：

使用 opacity 我将整个 div 设为透明，但我想保持字体正常而没有不透明度。我无法为内容设置单独的类或 id，因为它是动态创建的。我也不能使用以下内容：background: rgba();

{opacity : '0.3'}

有什么建议吗？

【问题讨论】：

Transparent background, but not the content (text & images) inside it, in CSS only?的可能重复
有什么理由不能使用background: rgba();？也许你可以使用更具体的东西，比如background-color。
如何创建透明图像1px x 1px 并将其设置为背景、背景图像？同时发布相关的HTML。

【解决方案1】：

为此，您需要添加背景图片透明背景。

然后在该图像上添加内容时，它会以 100% 的不透明度显示。

【讨论】：

【解决方案2】：

使用 rgba 模式

P{
   color:#fff;
    display:block;
    background: rgba(0,0,0,0.60);
}

【讨论】：

如果他创建了 DIV 容器 opacity: 0.3; 您的示例将无济于事，因为它的目标是 p
您可能希望添加 background: rgb(0,0,0,0.60); 作为旧浏览器的后备。在 rgba 规则之前添加它。否则它们根本就没有背景颜色。

【解决方案3】：

如果您不能使用background: rgba()，另一种解决方法是使用两个单独的容器，一个用于背景，另一个用于文本。参考这里https://stackoverflow.com/a/5135431/2965281

【讨论】：

【解决方案4】：

你可以同时做到这一点

background-color: rgba(0,0,0,0.3) /* rgb for (0,0,0) is black; opacity of 0.3 */

或

background-color: hsla(0,0%,0%,0.3) /* same */

“a”代表 Alpha 通道。

有一个问题：不幸的是，它不适用于所有浏览器。

要了解更多信息：

【讨论】：

【解决方案5】：

使用 RGBA 格式作为背景颜色。您可以尝试以下代码来获取背景不透明度：

background:rgba(0, 0, 0, .6);

【讨论】：