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

Question

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

例

页脚中的所有链接都需要一个自定义项目符号(背景图像),自定义项目符号的不透明度应为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%;
}

Answer 1

您可以使用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>

Answer 2

将图像转换为图像编辑器,调低不透明度,将其另存为.png并使用它.

Answer 3

这适用于每个浏览器

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/上的演示

Answer 4

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

Answer 5

您可以将图像放在div中:after或div:before并在"virtual 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/

Answer 6

#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,那么你不需要这个hack.

演示这种技术.

Answer 7

不幸的是，在撰写此答案时，还没有直接的方法可以做到这一点。你需要：

1. 使用半透明图像作为背景（更容易）。
2. 在您想要不透明的子项旁边添加一个额外的元素（如 div），为其添加背景，并在使其半透明后，将其放置在提到的子项后面。

Answer 8

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

Answer 9

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