设置背景图像不透明度CSS

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

因为如果我用这个代码，它适用于在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; 
}

我只想为背景图片设置不透明度，都可以请帮我

来源

2013-07-30 Chelz Adams

设置背景图片：http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity –

CSS不支持为背景图像分别设置不透明度。您需要将图像本身修改为具有适当的alpha通道信息的半透明PNG。

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

来源

2013-07-30 10:27:03

就在<div>设置不透明度和position: absolute 注它应该是相同的高度和宽度的增加图像。看看这个

demo

来源

2013-07-30 10:32:13 Ayush

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

来源

2013-07-30 10:36:01 user2618352

解决方案与1个股利和NO透明图像：

可以使用multibackground 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/

来源

2013-07-30 10:40:39 Wood

设置背景图像不透明度CSS

回答

相关问题