设置背景图像的不透明度而不影响子元素
是否可以设置背景图像的不透明度而不影响子元素的不透明度？
例
页脚中的所有链接都需要自定义项目符号（背景图片），自定义项目符号的不透明度应为50％。
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
#footer ul li { background: url(http://img.dovov.comarrow.png) no-repeat 0 50%; }
我所试过的
我尝试将列表项的不透明度设置为50％，但是链接文本的不透明度也是50％ – 似乎没有办法重置子元素的不透明度：
#footer ul li { background: url(http://img.dovov.comarrow.png) no-repeat 0 50%; /* will also set the opacity of the link text */ opacity: 0.5; }
我也试过使用rgba，但是对背景图像没有任何影响：
#footer ul li { /* rgba doesn't apply to the background image */ background: rgba(255, 255, 255, 0.5) url(http://img.dovov.comarrow.png) no-repeat 0 50%; }
把你的图像转换成图像编辑器，closures不透明度，保存为.png，然后使用它。
这将适用于每个浏览器
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; }
如果您不希望透明度影响整个容器及其子项，请检查此解决方法。 你必须有一个绝对定位的孩子与一个相对定位的父母。
在http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/查看演示;
如果您使用图像作为项目符号，则可以考虑：在伪元素之前。
#footer ul li { } #footer ul li:before { content: url(http://img.dovov.comarrow.png); filter:alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); opacity:.50; }
你可以在rgba()使用CSS linear-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>
你可以把图像放在div：after或div：之前，并在“virtual div”上设置不透明度
div:after { background: url(s.cdpn.io/3/owl1.jpg); opacity: 0.25; }
在这里findhttp://css-tricks.com/snippets/css/transparent-background-images/
#footer ul li { position: relative; opacity: 0.99; } #footer ul li::before { content: ""; position: absolute; width: 100%; height: 100%; z-index: -1; background: url(http://img.dovov.comarrow.png) no-repeat 0 50%; opacity: 0.5; }
不透明度为.99（小于1）的文件创buildz-index上下文，因此您不必担心全局z-index值。 （尝试删除它，看看在下一个演示中，父包装具有正z-index。）
如果你的元素已经有z-index，那么你不需要这个破解。
这种技术演示 。
不幸的是，在写这个答案的时候， 没有直接的方法来做到这一点。 你需要：
- 使用半透明图像的背景（更容易）。
- 添加一个额外的元素（如div）旁边的孩子，你想不透明，添加背景，并使其半透明后，将其放在后面提到的孩子。
要真正微调的东西，我build议将适当的select放在浏览器定向包装。 当我无法让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); }
我可能在上面的代码中有冗余 – 如果有人希望进一步清理它，请随意！
“filter”属性，需要一个不透明度百分比的整数，而不是双倍，以便为IE7 / 8工作。
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
PS：我发布这个答案，因为SO，至less需要6个改变的字符进行编辑。
如果必须将不透明度设置为项目符号，为什么不直接将Alpha通道设置为图像？ 顺便说一下，我不认为有一种方法来设置不透明度通过css的背景图像，而不改变整个元素（及其子）的不透明度。
只是添加到上面..你可以使用alpha通道与新的颜色属性，例如。 rgba（0,0,0,0）好吧，所以这是黑色的，但没有不透明度，所以作为父母不会影响孩子。 这只适用于Chrome，FF，Safari和….我瘦O.
将您的hex颜色转换为RGBA
我发现了一个关于这个问题的相当不错的简单教程。 我认为它效果很好（虽然它支持IE，我只是告诉我的客户使用其他浏览器）：
CSS背景透明度，不影响子元素，通过RGBa和filter
从那里你可以添加渐变支持等
#footer ul li { position:relative; list-style:none; } #footer ul li:before { background-image: url(imagesFolder/bg_demo.png); background-repeat:no-repeat; content: ""; top: 5px; left: -10px; bottom: 0; right: 0; position: absolute; z-index: -1; opacity: 0.5; }
你可以试试这个代码。 我认为这将起作用。 你可以访问演示
