透明背景，不透明的元素

Question

我希望在body上有一个图像背景，在主div上有一个半透明背景，这样可以通过它看到图像，但是有阴影。但是，最简单的

body {
  background-image: ...
}

#main {
  background-color: #999;
  opacity: 0.9
}

也会使#main内的所有内容都变得不透明，例如任何包含img的内容。

你怎么做我描述的？

由于

Answer 1

rgba可以帮助您，但并非所有浏览器都支持

用法：

rgba(a,b,c,d), where a = red(0-255); b = green(0-255); c = blue(0-255), d = alpha opacity(0-1)

所以如果你想要50％的红色背景，你应该使用

  

背景：rgba（255,0,0,0.5）;

Answer 2

如果您可以将CSS3用于您的项目，则可以使用rgba（）

#main {
  background-color: rgba(0, 0, 0, .5)
}

语法为rgba（红色，绿色，蓝色，Alpha）。这将使#main的背景透明但不是内容。

这是小提琴：http://jsfiddle.net/neilheinrich/FwxRX/

Answer 3

如果你创建了一个半透明的png文件，它有两个大的像素和你想要的颜色，那么将它作为main的背景图像添加，你应该得到所需的结果。