应用不透明度而不影响子元素答案

【问题标题】：Apply opacity without effecting the child elements应用不透明度而不影响子元素
【发布时间】：2013-10-20 13:09:00
【问题描述】：

我有一个div，它有一个背景图片，当它悬停时，div 将被赋予不透明度 0.7

<div>
  <span>text</span>
</div>

其次，我有一个跨度，当我悬停时，我使用 show() 覆盖其默认 css display:none。

问题是不透明度也适用于span，因此文本并没有像我预期的那样突出。我试图在悬停事件上将span 设置为不透明度 1，但运气不好。

【问题讨论】：

Set opacity of background image without affecting child elements 的可能重复项

标签： jquery css

【解决方案1】：

不透明度会影响元素的所有子元素。您可以通过使用两个并行 div 来实现您想要的，一个用于具有不透明度的背景图像，另一个用于跨度和 content 的其余部分。 bg-img 的absolute 定位不会影响content 的定位，会出现在这个后面。您还想使用top、bottom、right、left、width 或height 调整bg-img 的位置和大小

HTML：

<div>
    <div class="bg-img"></div>
    <div class="content">
        <span>text</span>
    </div>
</div>

CSS：

.bg-img {
    position: absolute;
}
.bg-img:hover {
    opacity: 0.7;
}

【讨论】：

【解决方案2】：

如果图像背后的背景颜色已知，您可以对<span> 应用不透明的背景颜色以使背景图像看起来褪色。

http://jsfiddle.net/TxQny/

HTML：

<div class="bg">
    <span class="overlay">text</span>
</div>

CSS：

.bg {
    background-color: #e0e0e0; /* You can use an image instead */
}
.overlay {
    display: block;
}
.overlay:hover {
    background-color: rgba(0, 255, 255, 0.3);
}

当然，这是假设您关心的所有浏览器都支持 RGBA。

【讨论】：