CSS 在不影响子元素的情况下设置背景图像的不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4997493/
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
Set opacity of background image without affecting child elements
提问by jmohr
Is it possible to set the opacity of a background image without affecting the opacity of child elements?
是否可以在不影响子元素不透明度的情况下设置背景图像的不透明度？
Example
例子
All links in the footer need a custom bullet (background image) and the opacity of the custom bullet should be 50%.
页脚中的所有链接都需要自定义项目符号（背景图像），并且自定义项目符号的不透明度应为 50%。
HTML
HTML
<div id="footer">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
CSS
CSS
#footer ul li {
background: url(/images/arrow.png) no-repeat 0 50%;
}
What I've Tried
我试过的
I tried setting the opacity of the list items to 50%, but then the opacity of the link text is also 50% - and there doesn't seem to be a way to reset the opacity of child elements:
我尝试将列表项的不透明度设置为 50%，但是链接文本的不透明度也是 50% - 似乎没有办法重置子元素的不透明度：
#footer ul li {
background: url(/images/arrow.png) no-repeat 0 50%;
/* will also set the opacity of the link text */
opacity: 0.5;
}
I also tried using rgba, but that doesn't have any effect on the background image:
我也尝试使用 rgba，但这对背景图像没有任何影响：
#footer ul li {
/* rgba doesn't apply to the background image */
background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}
回答by Stickers
You can use CSS linear-gradient()with rgba().
您可以将 CSSlinear-gradient()与rgba().
div {
width: 300px;
height: 200px;
background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
background: black;
color: white;
}<div><span>Hello world.</span></div>回答by 2ToneKenobi
Take your image into an image editor, turn down the opacity, save it as a .png and use that instead.
将您的图像放入图像编辑器，调低不透明度，将其另存为 .png 并使用它。
回答by Hussein
This will work with every browser
这适用于所有浏览器
div {
-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;
}
If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent.
如果您不希望透明度影响整个容器及其子项，请检查此解决方法。你必须有一个绝对定位的孩子和一个相对定位的父母。
Check demo at http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
在http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/查看演示
回答by Mr Griever
If you are using the image as a bullet, you might consider the :before pseudo element.
如果您将图像用作项目符号，则可以考虑 :before 伪元素。
#footer ul li {
}
#footer ul li:before {
content: url(/images/arrow.png);
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
}
回答by Zied Hamdi
You can put the image in the div:after or div:before and set the opacity on that "virtual div"
您可以将图像放在 div:after 或 div:before 中，并在该“虚拟 div”上设置不透明度
div:after {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
opacity: 0.25;
}
found here http://css-tricks.com/snippets/css/transparent-background-images/
在这里找到 http://css-tricks.com/snippets/css/transparent-background-images/
回答by user
#footer ul li {
position: relative;
opacity: 0.99;
}
#footer ul li::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background: url(/images/arrow.png) no-repeat 0 50%;
opacity: 0.5;
}
Hack with opacity .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。
回答by Reyraa
Unfortunately, at the time of writing this answer, there is no direct wayto do this. You need to:
不幸的是，在撰写此答案时，还没有直接的方法可以做到这一点。你需要：
- use a semi-transparent image for background (much easier).
- add an extra element (like div) next to children which you want the opaque, add background to it and after making it semi-transparent, position it behind mentioned children.
- 使用半透明图像作为背景（更容易）。
- 在您想要不透明的子项旁边添加一个额外的元素（如 div），为其添加背景，并在使其半透明后，将其放置在提到的子项后面。
回答by kaleazy
Another option is CSS Tricksapproach of inserting a pseudo element the exact size of the original element right behind it to fake the opaque background effect that we're looking for. Sometimes you will need to set a height for the pseudo element.
另一种选择是CSS Tricks方法，在其后面插入一个与原始元素完全相同大小的伪元素，以伪造我们正在寻找的不透明背景效果。有时您需要为伪元素设置高度。
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
回答by lyubeto
The "filter" property, needs an integer for percentage of opacity instead of double, in order to work for IE7/8.
“过滤器”属性需要一个整数来表示不透明度的百分比而不是双精度，以便适用于 IE7/8。
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
P.S.: I post this as an answer, since SO, needs at least 6 changed characters for an edit.
PS：我将此作为答案发布，因为 SO，需要至少 6 个更改的字符才能进行编辑。
回答by code-sushi
To really fine-tune things, I recommend placing the appropriate selections in browser-targeting wrappers. This was the only thing that worked for me when I could not get IE7 and IE8 to "play nicely with others" (as I am currently working for a software company who continues to support them).
为了真正微调，我建议在浏览器定位包装器中放置适当的选择。当我无法让 IE7 和 IE8“与他人很好地玩耍”时，这是唯一对我有用的东西（因为我目前为一家继续支持它们的软件公司工作）。
/* color or background image for all browsers, of course */
#myBackground {
background-color:#666;
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#myBackground {
-khtml-opacity:.50;
opacity:.50;
}
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
#myBackground {
-moz-opacity:.50;
opacity:0.5;
}
}
/* and IE last so it doesn't blow up */
#myBackground {
opacity:.50;
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}
I may have redundancies in the above code -- if anyone wishes to clean it up further, feel free!
我可能在上面的代码中有冗余——如果有人想进一步清理它，请随意！
