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

新手上路,请多包涵

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

更新:使用下面给出的 rgba 解决方案以及 CSS3PIE 的解决方案来让 rgba 在 IE 浏览器中工作

原文由 at. 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 570
2 个回答

您可以使用 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() 浏览器支持表,带有 演示链接和“更完整”兼容性表

原文由 David Thomas 发布,翻译遵循 CC BY-SA 2.5 许可协议

如果你想要跨浏览器的不透明度,你可以在你的 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 */
}

原文由 hunter 发布,翻译遵循 CC BY-SA 2.5 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题