设置背景图像不透明度CSS

Question

如何使用CSS设置背景图像不透明度，我想仅为背景图像设置不透明度，而不是为div中的每个元素设置。

例如，如果我使用此代码，它适用于div中的每个元素，

.myclass {
-khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

我只想为背景图片设置不透明度，请大家帮忙

Answer 1

CSS不支持为背景图像单独设置不透明度。您需要将图像本身修改为具有正确Alpha通道信息的半透明PNG。

使用CSS3伪元素，你可以hack it，但这不是真的'漂亮'，它不再是真正的背景，影响大小选项等。

Answer 2

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

您可以使用多背景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/

Answer 3

只需在<div>中添加图像设置不透明度和position: absolute注意它应该具有相同的高度和宽度。看看这个

demo

Answer 4

最好的方法是有一个位置：绝对在.myclass之前和与.myclass相同的高度，然后应用背景图像和不透明度：0.5; filter：alpha（opacity = 50）;

Answer 5

如果您在设置后不需要更改不透明度，则可以在浏览器上仅显示具有所需不透明度的图像，截取屏幕截图并使用屏幕截图文件作为背景图像。

Answer 6

我使用了以下功能，效果很好。 filter:alpha(opacity=x)。 x可以取0到100之间的值。随着值变大，透明度增加，您可以在元素的悬停属性中使用它。

这是一个例子：

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}