Html CSS背景图像不透明度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6890218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background-image-opacity?
提问by Niet the Dark Absol
Related to How do I give text or an image a transparent background using CSS?, but slightly different.
有关如何使用 CSS 为文本或图像提供透明背景？，但略有不同。
I'd like to know if it's possible to change the alpha value of a background image, rather than just the colour. Obviously I can just save the image with different alpha values, but I'd like to be able to adjust the alpha dynamically.
我想知道是否可以更改背景图像的 alpha 值，而不仅仅是颜色。显然，我可以使用不同的 alpha 值保存图像，但我希望能够动态调整 alpha。
So far the best I've got is:
到目前为止，我所拥有的最好的是：
<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>
It works, but it's bulky and ugly, and messes things up in more complicated layouts.
它可以工作，但体积庞大且丑陋，并且在更复杂的布局中会将事情搞砸。
采纳答案by DanMan
If the background doesn't have to repeat, you can use the sprite technique (sliding-doors) where you put all the images with differing opacity into one (next to each other) and then just shift them around with background-position.
如果背景不必重复，您可以使用精灵技术（滑动门），将具有不同不透明度的所有图像合二为一（彼此相邻），然后使用background-position.
Or you could declare the same partially transparent background image more than once, if your target browser supports multiple backgrounds(Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+). The opacity of those multiple images should add up, the more backgrounds you define.
或者，如果您的目标浏览器支持多种背景（Firefox 3.6+、Safari 1.0+、Chrome 1.3+、Opera 10.5+、Internet Explorer 9+），您可以多次声明相同的部分透明背景图像。这些多个图像的不透明度应该加起来，你定义的背景越多。
回答by Gabriele Petrioli
You can do the faded background with CSS Generated Content
您可以使用 CSS Generated Content 制作褪色的背景
Demo at http://jsfiddle.net/gaby/WktFm/508/
演示在http://jsfiddle.net/gaby/WktFm/508/
Html
html
<div class="container">
contents
</div>
Css
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;
}
But you cannot modify the opacity as we are not allowed to modify generated content..
但是您不能修改不透明度，因为我们不允许修改生成的内容..
You could manipulate it with classes and css events though (but not sure if it fits your needs)
您可以使用类和 css 事件来操作它（但不确定它是否适合您的需要）
for example
例如
.container:hover:before{
opacity:1;
}
UPDATE
更新
You can use css transitions to animate the opacity (again through classes)
您可以使用 css 过渡来为不透明度设置动画（再次通过类）
demo at http://jsfiddle.net/gaby/WktFm/507/
演示在http://jsfiddle.net/gaby/WktFm/507/
Adding
添加
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
to the .container:beforerule will make the opacity animate to 1 in one second.
该.container:before规则将不透明度动画1在一秒钟。
Compatibility
兼容性
- FF 5 (maybe 4 also, but do not have it installed.)
- IE 9 Fails..
- Webkit based browsers fail (Chrome supports it now v26 - maybe earlier versions too, but just checked with my current build), but they are aware and working on it ( https://bugs.webkit.org/show_bug.cgi?id=23209)
- FF 5（也可能是 4，但没有安装它。）
- IE 9 失败..
- 基于 Webkit 的浏览器失败（Chrome 现在支持 v26 - 也许早期版本也支持它，但只是检查了我当前的版本），但他们知道并正在处理它（https://bugs.webkit.org/show_bug.cgi?id= 23209)
.. so only the latest FF supports it for the moment.. but a nice idea, no ? :)
.. 所以目前只有最新的 FF 支持它..但一个好主意，不是吗？:)
回答by Andy.Diaz
.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);
}
复制自：http: //robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
回答by Saud Alfadhli
Try this trick .. use css shadow with (inset) option and make the deep 200px for example
试试这个技巧.. 使用带有 (inset) 选项的 css shadow 并使深 200px 例如
Code:
代码：
box-shadow: inset 0px 0px 277px 3px #4c3f37;
.
.
Also for all browsers:
也适用于所有浏览器：
-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;
and increase number to make fill your box :)
并增加数量以填充您的盒子:)
Enjoy!
享受！
回答by Alex K
You can put a second element inside the element you wish to have a transparent background on.
您可以在希望具有透明背景的元素内放置第二个元素。
<div class="container">
<div class="container-background"></div>
<div class="content">
Yay, happy content!
</div>
</div>
Then make the '.container-background' positioned absolutely to cover the parent element. At this point you'll be able to adjust the opacity of it without affecting the opacity of the content inside '.container'.
然后使 '.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;
}
回答by Cokegod
You can't edit the image via CSS. The only solution I can think of is to edit the image and change its opacity, or make different images with all the opacities needed.
您无法通过 CSS 编辑图像。我能想到的唯一解决方案是编辑图像并更改其不透明度，或者使用所需的所有不透明度制作不同的图像。
回答by user
#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;
}
Hack with opacity 0.99 (less than 1) creates z-index context so you can not worry about global z-index values. (Try to remove it and see what happens in the next demo where parent wrapper has positive z-index.)
If your element already has z-index, then you don't need this hack.
不透明度为 0.99（小于 1）的 Hack 会创建 z-index 上下文，因此您不必担心全局 z-index 值。（尝试删除它，看看在下一个演示中会发生什么，其中父包装器具有正 z-index。）
如果您的元素已经具有 z-index，那么您不需要这个 hack。
Demo.
演示。
回答by JM Causing
Try this
尝试这个
<div style="background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(/image.png);background-repeat: no-repeat; background-position: center;"> </div>
<div style="background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(/image.png);background-repeat: no-repeat; background-position: center;"> </div>
回答by Stanislav
Here is another approach to setup gradient and stransparency with CSS. You need to play arround with the parameters a bit though.
这是使用 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 */
回答by Ali Silva
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%;
}
So to say its the body::after you are looking for. This way the code for your body is not changed or altered only the background where you can make changes where necessary.
所以说它的身体::在你正在寻找之后。这样，您身体的代码不会更改或仅更改背景，您可以在必要时进行更改。
