如何使div的背景颜色半透明？

Posted 2023-03-06

【中文标题】如何使div的背景颜色半透明？

【英文标题】：How to make a div's background color translucent?

【发布时间】：2011-06-11 09:08:27

【问题描述】：

我只希望我的 div 中的白色背景颜色大约是半透明的 50%。内容应该是完全不透明的。这样做的正确方法是什么？我想象当我查看background CSS property 时，我会找到一个不透明度设置，但没有。不关心 IE6。

更新：使用下面给出的 rgba 解决方案与 CSS3PIE's solution for getting rgba to work in IE browsers 一起解决。

【问题讨论】：

我可以理解为您希望只有背景图像的白色部分 具有 50% 的半透明度，并且任何非白色部分保持不透明。我就是你所追求的？到目前为止，所有答案都解决了完整图像的不透明度问题。

@Stephen P，虽然你的解释是正确的，但我认为他说他希望div 有一个白色的background-color，并且那个颜色有50% 的透明度。我不认为他的意思是 css 图像蒙版类型的东西。

CSS: semi-transparent background, but not text的可能重复

【参考方案1】：

您可以使用background-color: rgba() 表示法：

#theIdofYourElement,
.classOfElements 
    background-color: #fff;
    background-color: rgba(255,255,255,0.5);

---

编辑

以添加默认的background-color（适用于不理解rgba() 表示法的浏览器）。尽管我的印象是除了 IE 之外的所有人 确实 都理解它（但我可能是错的，并且没有经过测试确定......）。

感谢@akamike 进行编辑。

---

编辑

以解决来自 OP 的问题（在 cmets 中）：

哪些浏览器不支持 rgba？以后都会了，这是css3的一部分吗？

我能找到的最佳信息是the CSS Tricks' rgba() browser support table，以及a link to a demo and 'more complete' compatibility table。

【讨论】：

需要补充一点，不理解 rgba 的浏览器不会有背景，所以在你的 rgba 声明之前声明一个纯色 rgb 或 hex background-color。

这就是我要找的，但是哪些浏览器不理解 rgba？将来他们都会吗，这是css3的一部分吗？

透明和半透明是有区别的。

感谢您的回复，您提到的上述代码使背景透明，它可能有蓝色或绿色之类的颜色，但它是透明的。半透明是有点模糊的东西，就像我们把黄油放在纸上，光线开始穿过它，它是半透明的。在 iPhone 中你可以看到半透明效果见图片belka.us/en/wp-content/uploads/sites/2/2016/06/blur-table.png

【参考方案2】：

如果你想要跨浏览器的不透明度，你可以在你的 css 定义中处理每个

div

    opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
    filter: alpha(opacity=50); /* IE lt 8 */
    -ms-filter: "alpha(opacity=50)"; /* IE 8 */
    -khtml-opacity: .50; /* Safari 1.x */
    -moz-opacity: .50; /* FF lt 1.5, Netscape */

【讨论】：

这将使 div 的前景也透明 50%，不是吗？

这使前景也变得半透明

也使前景半透明。原发帖者已经知道这一点，并正在询问如何避免它。

@gillytech，你在说什么？

@hunter 最初的问题是寻求一种方法来使背景 div 半透明，同时保持 div 中的项目不透明。您的回答将使 div 中的所有内容 50% 透明。这不是一个合适的答案。

【参考方案3】：

有一个名为 backdrop-filter 的 CSS 属性提供真正的半透明（与 CSS 中已经提供的透明度相反）。

目前仅支持 Safari，但可能会添加到更多浏览器。

.my-selector 
   backdrop-filter: blur(5px);

More about the selector Browser support

【参考方案4】：

最简单的方法是创建一个半透明的 PNG，然后将其用作 div 的背景图像。

如果您使用的是 Photoshop（或类似工具），只需创建一个 10 像素 x 10 像素的全白图像，然后将不透明度滑块向下拖动到 50%。将其保存为 PNG，您应该会很开心！

使用 RGBA 也是一种可能，但你不只是失去了 IE6 —— 仍然有很多人使用不支持 alpha 方案的浏览器。

【讨论】：

这很简单！但我更喜欢 rgba 解决方案

如果您已经在使用modernizr，这个解决方案将是一个可行的后备方案。