Question

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

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

其次，我有一个跨度，当我徘徊时，我使用show()覆盖其默认的CSS display:none。

问题是不透明度也适用于span，所以文字并不像我期望的那样突出。我试图在悬停事件中将span设置为不透明度1，但没有运气。

Answer 1

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

<强> HTML ：

width

<强> CSS ：

height

Answer 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。

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

2 个答案: