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>

Answer 1

简短回答:否。

长答案:是的，如果您使用 rgba 颜色而不是 opacity 属性。例如，以下将为您提供不透明度为 20% 的黑色背景和完全不透明度的黑色文本:

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

对于背景图像，请使用带有 alpha channel 的 PNG。