Question

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

更新：使用下面结合CSS3PIE's solution for getting rgba to work in IE browsers给出的rgba解决方案进行解决。

Answer 1

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

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

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

感谢@akamike编辑。

<小时/> 已编辑以解决OP中的问题（在评论中）：

哪些浏览器不了解rgba？将来他们都是css3的一部分吗？

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

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

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

如果您正在使用Photoshop（或类似工具），只需创建一个全白的10px x 10px图像 - 然后将不透明度滑块向下拖动到50％。把它保存为PNG，你应该摇滚吧！

使用RGBA也是一种可能性，但你不仅仅是失去了IE6 - 还有不少人使用不支持alpha方案的浏览器。

Answer 4

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

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

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

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

4 个答案: