我可以在同一属性中设置背景图像和不透明度吗？

1 div和无透明图像的解决方案：

您可以使用多背景CSS3功能并放置两个背景：一个带有图像，另一个带有透明面板（因为我认为无法直接设置背景图像的不透明度）：

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

您不能使用rgba(255,255,255,0.5)它，因为仅在背面就可以接受它，因此在此示例中，我为每个浏览器使用了生成的渐变（这就是为什么它这么长）。但是概念如下：

background: tranparentColor, url("myImage"); 

http://jsfiddle.net/pBVsD/1/

两种方法：

1. 转换为PNG并使原始图像0.2不透明
2. （更好的方法）有一个<div>是position: absolute;前#main和相同的高度#main，然后应用背景图像和opacity: 0.2; filter: alpha(opacity=20);。