CSS 如何使div的背景颜色半透明？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4729196/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a div's background color translucent?
提问by at.
I only want the background color of white in my div to be translucent roughly 50%. The content should be fully opaque. What's the proper way to do this? I imagined when I looked up the background CSS property, I'd find an opacity setting, but didn't. Don't care about IE6.
我只希望我的 div 中白色的背景颜色半透明大约 50%。内容应该是完全不透明的。这样做的正确方法是什么？我想象当我查找背景 CSS 属性时，我会找到一个不透明度设置，但没有。不关心IE6。
UPDATE: solving with the rgba solution given below in conjunction with CSS3PIE's solution for getting rgba to work in IE browsers.
更新：使用下面给出的 rgba 解决方案与CSS3PIE 的解决方案一起解决，使 rgba 在 IE 浏览器中工作。
回答by David says reinstate Monica
You can use the background-color: rgba()notation:
您可以使用background-color: rgba()符号：
#theIdofYourElement,
.classOfElements {
background-color: #fff;
background-color: rgba(255,255,255,0.5);
}
Edited编辑添加默认值
background-colorbackground-color（对于不理解rgba()rgba()符号的浏览器）。尽管我的印象是除了 IEdo确实理解它（但我可能是错的，并且还没有测试来确定......）。Edit with thanks to @akamike.
感谢@akamike 进行编辑。
Edited编辑以解决来自 OP 的问题（在评论中）：
which browsers don't understand rgba? will they all in the future, is this part of css3?
哪些浏览器不理解 rgba？他们将来都会，这是css3的一部分吗？
The best information I could find is the CSS Tricks' rgba()browser support table, with a link to a demo and 'more complete' compatibility table.
我能找到的最好的信息是CSS Tricks 的rgba()浏览器支持表，其中包含一个演示链接和“更完整”的兼容性表。
回答by hunter
If you want cross-browser opacity, you can handle each within your css definition
如果你想要跨浏览器的不透明度，你可以在你的 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 */
}
回答by sandstrom
There is a CSS property called backdrop-filterproviding real translucency (as opposed to transparency, which is already available in CSS).
有一个 CSS 属性称为backdrop-filter提供真正的半透明（与透明度相反，它已经在 CSS 中可用）。
Currently only supported by Safari, but it may be added to more browsers.
目前仅 Safari 支持，但可能会添加到更多浏览器中。
.my-selector {
backdrop-filter: blur(5px);
}
回答by minichate
Easiest way is to create a semi-transparent PNG and just use that as your background image for the div.
最简单的方法是创建一个半透明的 PNG，并将其用作 div 的背景图像。
If you're using Photoshop (or similar tools) just create a 10px by 10px image that is all white -- then drag the opacity slider down to 50%. Save it as a PNG and you should be rockin'!
如果您使用 Photoshop（或类似工具），只需创建一个 10 像素 x 10 像素的全白图像——然后将不透明度滑块向下拖动到 50%。将其另存为 PNG，您应该会很兴奋！
Using RGBA is also a possibility, but you're not just losing IE6 then -- there are still quite a few people using browsers that don't support the alpha scheme.
使用 RGBA 也是一种可能性，但您不仅会失去 IE6——仍然有相当多的人使用不支持 alpha 方案的浏览器。
