如何使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);
}

编辑添加默认值background-color(对于不理解rgba()符号的浏览器).虽然我的印象是除IE以外的所有人都理解它(但我可能是错的,并且没有经过测试以确定......).

编辑感谢@akamike.

编辑解决OP的问题(在评论中):

哪些浏览器不懂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

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

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

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

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