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

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

- jmohr

---

https://dev59.com/Nmw15IYBdhLWcg3wntAQ#6502295 - Cypher

有关 https://dev59.com/_XRA5IYBdhLWcg3w1BqW - Adriano

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>

- Stickers

---

非常好的技巧，正是我在寻找的，谢谢。 - Mike

请 @jmohr 将此答案标记为正确答案。 - Despertaweb

@stickers 我可以问一下，如果我想让它变得更轻的不透明度，那么我应该在rgba中添加哪些数字或小数？谢谢。 - J_Y

@JaeYing 调整 alpha 值，并确保 rgba 中两个值相同，否则会产生渐变效果。 - Stickers

太棒了！有没有办法用两个背景图片来实现这个效果？原始代码：► background-image: url(https://example.com/image1.png), url(https://example.com/image2.png); 使用你的CSS：► background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(https://example.com/image1.png), linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url(https://example.com/image2.png);结果是两张图片都显示出来了，但是Image1变成了白色且Image2没有改变。如果我删除第二个URL前面的CSS，那么两张图片都会显示出来，但是只有Image1的透明度为0.5。 - nnamerz

Answer 2

将您的图像导入到图像编辑器中，降低不透明度，将其保存为 .png 文件并使用它。

- 2ToneKenobi

---

嗯，我刚刚踩了一下，但看看这个被接受的答案：https://dev59.com/Nmw15IYBdhLWcg3wntAQ#6502295，点赞了10次，而且基本上一模一样。 - Alex

这是一个不错的选择，不知道为什么会有那么多踩。如果我能点赞两次的话，我会这么做。一个部分透明的父元素的子元素也会是部分透明的，而且应该如此。所有“解决方法”都是应该最终被修复的错误。 - RobW

您已经在下载图片，这不是额外的请求。 - brad

@mystrdat 但他已经在下载箭头图像了。你没有提供一个非图像的解决方案，这就是我的观点。他已经在下载箭头图像了，它可能会随时需要，这不会产生额外的请求。我不明白你的想法从哪里来。 - brad

@brad，我道歉，现在我再次检查后发现我误读了问题。 - zrooda

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/

- Hussein

---

我认为你需要将上面代码中的“”引号改为"，这样在直接复制粘贴时才能正常工作。 - nsantorello

这个答案仍然是人们发现的解决“如何使子元素不继承父元素CSS不透明度值”的问题的最佳方法吗？我需要这个子元素真正成为一个子元素... 并在文档流中... 也不想引入JavaScript/Flash来实现；更喜欢纯CSS。 - govinda

我有50%不透明度的父级<li>，其中包含我想要100%不透明度的子级图像。将<li>设置为position:relative;并将img设置为position:absolute;无法覆盖img上继承的不透明度，而且我不能对<li>本身使用绝对定位（那会很混乱）。在Javascript中，我尝试了imgs[i].style.opacity ='1';，但这也无法覆盖继承的不透明度。如果我理解正确，我也不能使用rgba，因为我需要影响图像本身，而不仅仅是背景颜色。有人能给我推荐吗？ - govinda

整个回答毫无意义。所提供的代码不仅是提问者不想做的事情，因为它行不通，而且也不符合描述或链接。我很难理解为什么这么多人点赞它。 - BoltClock

如果问题是“如何在元素上设置50％的透明度”，那么这将是一个很好的答案。 - lharby

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

- Mr Griever

---

筛选器只是IE浏览器的解决方案。 - Hussein

我认为这可能是最好的解决方案。它是一个纯CSS解决方案。也可以使用 *zoom: expression(...); 来破解IE7支持(参见:after 和 :before css 伪元素hack for IE 7)，但是IE7终于过时了。 - thirdender

Answer 5

你可以将图片放在 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/

- Zied Hamdi

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

使用不到1的不透明度（opacity .99）进行Hack，可以创建z-index上下文，这样你就不必担心全局z-index值。（尝试删除它并查看下一个演示，其中父包装器具有正z-index值，看会发生什么。）如果您的元素已经具有z-index，则不需要使用此Hack。 此技术的演示。

- user

---

你知道为什么我们需要将不透明度设置为小于1的值吗？这是一个跨浏览器的解决方案吗？ - zVictor

@zVictor 是的，这是符合w3c标准的行为。请参阅理解CSS z-index：堆叠上下文。 - user

Answer 7

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

- kaleazy

Answer 8

很抱歉，在撰写本答案时，没有直接的方法来实现这一点。您需要：

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

- Reyraa

Answer 9

"filter"属性需要一个整数来表示透明度的百分比，而不是小数，才能在IE7/8中正常工作。

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

附言：我发布这个作为答案，因为Stack Overflow需要至少更改6个字符才能进行编辑。

- lyubeto

Answer 10

为了真正地调整细节，我建议将适当的选择放置在浏览器定位包装器中。当我无法让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);
}

我可能在上面的代码中有冗余 -- 如果有人希望进一步优化它，请随意！

- code-sushi

---

不需要分别针对每个浏览器进行设置，只需在单个选择器块内使用浏览器前缀即可。使用浏览器前缀，浏览器将仅使用相应的CSS属性。随着时间的推移和该属性的语法变为标准化，浏览器供应商将停止支持前缀，并使用没有任何前缀的CSS属性（例如，Firefox在Firefox 13中停止支持“-moz-border-radius”，现在只查找标准的“border-radius”属性）。IE7和IE8则是另一回事，但那只是IE :-p - thirdender

我想知道是谁投了反对票，以及为什么。没有有用的反馈，投票就毫无意义。我希望能够改进我的回答。如果只是因为信息过时，请检查日期。:) 谢谢。 - code-sushi

@code-sushi：如果你的评论和downvote发生在同一时间，考虑到可能是其他人同意thirdender的评论（注意评论本身的upvotes）所致。我没有投票支持你的答案，但我必须承认-我想补充说明1）KHTML永远不会看到“-khtml-opacity”，因为它不理解媒体查询，使其无用2）IE比你想象的更稳定；只是因为你添加了非IE前缀到适用于IE的规则中，它不会“爆炸”。你当时遇到的问题必须来自其他地方。 - BoltClock

我的原始回答是近两年前的，而这次的负评发生在最近，就是今年。我只是好奇。至于IE的评论，它们与7有关，当时还需要支持；我相信现在大多数情况下可以忽略IE 7了。感谢您的反馈。 - code-sushi