透明背景，不透明元素
我希望在 body 上有一个图像背景，在主 div 上有一个半透明背景，以便可以透过它看到图像，但有阴影。然而，最简单的方法
body {
background-image: ...
}
#main {
background-color: #999;
opacity: 0.9
}
也会使 #main 中的所有内容都变得不透明，例如任何包含的 img。
你如何做到我所描述的？
谢谢
I want to have an image background on body and a semitransparent background on main div, so that the image can be seen through it, but shaded. However, the easiest
body {
background-image: ...
}
#main {
background-color: #999;
opacity: 0.9
}
will also make everything within #main to be opaque as well, such as any contained img.
How do you do what I describe?
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
rgba 可以帮助你，但并不是所有浏览器都支持它
：
所以如果你想要 50% 的红色背景，你应该使用
rgba helps you, but it is not supported by all browsers
usage:
so if you want a 50% red background, you should use
如果您的项目可以使用 CSS3，则可以使用 rgba()
语法为 rgba(Red, Green, Blue, Alpha)。这将使#main 的背景透明，但内容不透明。
这是小提琴： http://jsfiddle.net/neilheinrich/FwxRX/
If you can use CSS3 for your project you can use rgba()
The syntax is rgba(Red, Green, Blue, Alpha). This will make the background of #main transparent but not the content.
Here is fiddle: http://jsfiddle.net/neilheinrich/FwxRX/
如果您创建一个半透明的 png 文件，大小为几个像素，并且颜色与您想要的颜色相同，然后将其添加为 main 的背景图像，您应该会得到所需的结果。
If you create a semi transparent png file a couple of pixels large and in the colour you are after then add that as the background image of main you should get the desired result.