如何让div的背景色变成半透明？

Question

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

更新：使用下面给出的 rgba 解决方案结合 CSS3PIE 让 rgba 在 IE 浏览器中工作的解决方案。

Answer 1

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

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

---

Edited to add the default background-color (for browsers that don't understand the rgba() notation). Albeit I was under the impression that all but IE do understand it (but I could be wrong, and haven't tested to be sure...).

感谢@akamike 进行编辑。

---

Edited to address question from OP (in comments):

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

我能找到的最好的信息是 CSS Tricks 的 rgba() 浏览器支持表，其中包含演示链接和“更完整”的兼容性表 。

Answer 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 */
}

Answer 3

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

目前所有现代浏览器都支持。

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

• 有关选择器的更多信息
• 浏览器支持

Answer 4

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

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

使用 RGBA 也是一种可能性，但是您不仅会失去 IE6，还有相当多的人使用不支持 alpha 方案的浏览器。