CSS透明度和文本问题

Question

当鼠标指针悬停在链接上时，有没有办法阻止不透明度影响链接文本？我只想让不透明度仅影响图像。

以下是CSS代码：

.email {
    background: url(../images/email.gif) 0px 0px no-repeat;
    margin: 0px 0px 0px 0px;
    text-indent: 20px;
    display: inline-block;
}

.email:hover {
    opacity: 0.8;
}

这是xHTML。

<a href="#" title="Email" class="email">Email</a>

- cSS

Answer 1

简短回答：不可以。

详细回答：如果你使用rgba颜色而非opacity属性，则可以实现。例如，以下代码会给出一个20%不透明度的黑色背景和完全不透明的黑色文本：

p {
    background: rgba(0, 0, 0, 0.2);
    color: #000000;
}

对于背景图片，请使用带有 alpha 通道的 PNG 格式。

- You

---

请注意，这是CSS3的一个特性，并且它并不完全兼容所有浏览器。至少要意识到这一点，并优雅地降级处理。 - Dustin Laine

我喜欢这个解决方案！谢谢！ - micronyks

Answer 2

是的，使用绝对定位将文本从透明容器的上下文中取出。这也适用于背景图像！

<div id="TransContainer">
    <div id="TransBox" href="#">Some text that will be opaque!</div>
    <div id="NonTransText">Some text that I do not want opaque!</div>
</div>

<style>
#TransContainer
{
    position: relative;
    z-index: 100;
    display: block;
    width: 420px;
    height: 165px;
    background-color: blue;
}
#TransBox
{
    background-color: green;
    display: block;
    width: 100px;
    height: 100px;
    opacity:0.4;
    filter:alpha(opacity=40)
}
#NonTransText
{
    color: #000;
    position: absolute;
    top: 20px;
    left: 0;
}
</style>

- Dustin Laine

---

一个对于根本不存在的问题的可怕解决方案。 - You

在不兼容CSS3的任何浏览器中都存在这个问题。我同意，使用CSS3是目前最好的解决方案。 - Dustin Laine

Answer 3

不要使用背景图片（如果只是背景颜色可以）。在.email:hover中，用不那么不透明的版本替换背景图片，而不是使用不透明度。

- user113292