设置背景图像的不透明度而不影响子元素

是否可以设置背景图像的不透明度而不影响子元素的不透明度?

页脚中的所有链接都需要自定义项目符号(背景图片),自定义项目符号的不透明度应为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/查看演&#x793A;

如果您使用图像作为项目符号,则可以考虑:在伪元素之前。

 #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(https://s3-us-west-2.amazonaws.com/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,那么你不需要这个破解。

这种技术演示 。

不幸的是,在写这个答案的时候, 没有直接的方法来做到这一点。 你需要:

  1. 使用半透明图像的背景(更容易)。
  2. 添加一个额外的元素(如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; } 

你可以试试这个代码。 我认为这将起作用。 你可以访问演示