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

例

页脚中的所有链接都需要自定义项目符号（背景图片），并且自定义项目符号的不透明度应为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(/images/arrow.png) no-repeat 0 50%;
}  

我尝试过的

我尝试将列表项的不透明度设置为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;
}

我也尝试过使用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%;
}

您可以将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>

将您的图像导入图像编辑器，降低不透明度，将其另存为.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/查看演示

如果要将图像用作项目符号，则可以考虑：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;
}

您可以将图片放在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;
}

在这里找到 http://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(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

不透明度为.99（小于1）的Hack会创建z-index上下文，因此您不必担心全局z-index值。（尝试将其删除，并在下一个演示中父包装具有正z-index的示例中发生什么。）
如果您的元素已经具有z-index，则不需要此技巧。

此技术的演示。

不幸的是，在编写此答案时，尚无直接方法可以做到这一点。你需要：

1. 使用半透明的图片作为背景（容易得多）。
2. 在您想要不透明的孩子旁边添加一个额外的元素（如div），向其添加背景，并将其设置为半透明后，将其放置在上述孩子的后面。

另一种选择是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;   
}

为了适用于IE7 / 8，“过滤器”属性需要一个不透明度百分比的整数而不是两倍。

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

PS：我将其作为答案发布，因为这样，至少需要6个更改的字符才能进行编辑。

为了真正进行微调，我建议将适当的选择放置在以浏览器为目标的包装器中。当我无法让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);
}

我可能在上面的代码中有多余之处-如果有人希望进一步清理它，请随意！

如果您必须仅将不透明度设置为项目符号，为什么不将Alpha通道直接设置为图像呢？顺便说一句，我不认为有一种方法可以通过CSS将不透明度设置为背景图像，而不改变整个元素（及其子元素）的不透明度。

仅添加到上面。您可以将alpha通道与新的颜色属性一起使用，例如。rgba（0,0,0,0）好的，所以它是黑色的，但不透明度为零，因此作为父级它不会影响子级。这仅适用于Chrome，FF，Safari等。

将您的十六进制颜色转换为RGBA

我找到了有关此问题的非常不错且简单的教程。我认为它很好用（尽管它支持IE，但我只是告诉我的客户使用其他浏览器）：

CSS背景透明性，不影响子元素，通过RGBa和滤镜

从那里可以添加渐变支持等。

#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;
    }

您可以尝试此代码。我认为这将会奏效。您可以访问演示