CSS background-image-opacity？
相关的如何使用CSS给文本或图像一个透明的背景？ ，但稍有不同。
我想知道是否有可能改变背景图像的alpha值，而不仅仅是颜色。 显然，我可以保存图像不同的alpha值，但我希望能够dynamic调整阿尔法。
到目前为止，我所得到的最好的是：
<div style="position: relative;"> <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background-image: url(...); opacity: 0.5;"></div> <div style="position: relative; z-index: 1;"> <!-- Rest of content here --> </div> </div> 它可以工作，但是它笨重和丑陋，并且在更复杂的布局中混淆了事物。
如果背景不需要重复，可以使用精灵技巧（滑动门），将不同透明度的所有图像合并为一个（相邻），然后将它们与background-position 。
或者如果您的目标浏览器支持多种背景 （Firefox 3.6 +，Safari 1.0+，Chrome 1.3+，Opera 10.5+，Internet Explorer 9 +），则可以多次声明相同的部分透明背景图像。 这些多个图像的不透明度应该加起来，你定义的背景越多。
您可以使用CSS生成的内容来完成褪色的背景
演示http://jsfiddle.net/gaby/WktFm/508/
HTML
<div class="container"> contents </div>
CSS
.container{ position: relative; z-index:1; overflow:hidden; /*if you want to crop the image*/ } .container:before{ z-index:-1; position:absolute; left:0; top:0; content: url('path/to/image.ext'); opacity:0.4; }
但是你不能修改不透明度，因为我们不允许修改生成的内容..
你可以使用类和css事件来操作它（ 但不知道它是否适合你的需求 ）
例如
.container:hover:before{ opacity:1; }
UPDATE
您可以使用CSS转换来为不透明度（ 再次通过类 ）
演示在http://jsfiddle.net/gaby/WktFm/507/
添加
-webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; -moz-transition: opacity 1s linear; transition: opacity 1s linear;
到.container:before规则会使不透明度在1秒内变为1。
兼容性
- FF 5（ 也许也是4，但是没有安装。 ）
- IE 9失败
- 基于Webkit的浏览器失败（ Chrome现在支持v26 – 也许也是早期的版本，但只是检查我的当前版本 ），但他们知道并正在处理它（ https://bugs.webkit.org/show_bug.cgi?id= 23209 ）
..所以只有最新的FF支持它的时刻.. 但一个不错的主意，不是？ 🙂
.class { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); }
试试这个技巧..使用css阴影（插入）选项，并使深200px为例
码：
box-shadow: inset 0px 0px 277px 3px #4c3f37;
。
也适用于所有浏览器：
-moz-box-shadow: inset 0px 0px 47px 3px #4c3f37; -webkit-box-shadow: inset 0px 0px 47px 3px #4c3f37; box-shadow: inset 0px 0px 277px 3px #4c3f37;
并增加数量来填充你的盒子:)
请享用！
你可以把第二个元素放在你希望有一个透明背景的元素中。
<div class="container"> <div class="container-background"></div> <div class="content"> Yay, happy content! </div> </div>
然后使“.container-background”绝对定位于父元素。 此时，您可以调整不透明度，而不会影响“.container”内部的不透明度。
.container { position: relative; } .container .container-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(background.png); opacity: 0.5; } .container .content { position: relative; z-index: 1; }
你不能通过CSS编辑图像。 我能想到的唯一的解决办法是编辑图像，改变其不透明度，或使不同的图像与所有的不透明度需要。
#id { position: relative; opacity: 0.99; } #id::before { content: ""; position: absolute; width: 100%; height: 100%; z-index: -1; background: url('image.png'); opacity: 0.3; }
不透明度为0.99（小于1）的文件创buildz-index上下文，因此您不必担心全局z-index值。 （尝试删除它，看看在下一个演示中，父包装具有正z-index。）
如果你的元素已经有z-index，那么你不需要这个破解。
演示 。
这是另一种使用CSS设置渐变和透明度的方法。 你需要稍微玩一下参数。
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, transparent)),url("gears.jpg"); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Chrome10+,Safari5.1+ */ background-image: -moz-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* FF3.6+ */ background-image: -ms-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* IE10+ */ background-image: -o-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Opera 11.10+ */ background-image: linear-gradient(to bottom, transparent, transparent),url("gears.jpg"); /* W3C */
body { ' css code that goes in your body' } body::after { background: url(yourfilename.jpg); content: ""; opacity: 0.6; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: -1; width:auto; height: 100%; }
所以要说出它的身体::在你寻找之后。 这样，你的身体的代码不会改变或只改变你可以在必要的地方进行更改的背景。
