CSS不透明度和文本问题

有没有一种方法可以阻止不透明度影响我的链接文本时，鼠标指针悬停在我的链接？我只是希望不透明度只影响图像。CSS不透明度和文本问题

这是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>

来源

2010-07-30 cSS

简短的回答：第

龙答：是的，如果你使用rgba的颜色而不是opacity财产。例如，下面会给你一个黑色的背景与20％的不透明度和黑色文本和具有完全不透明：

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

背景图像，使用PNG与Alpha通道。

来源

2010-07-30 21:44:17 You

您应该注意到，这是一个CSS3功能，它并不完全与浏览器兼容。至少要意识到并且优雅地降级。 – 2010-07-31 02:34:22

我喜欢这个解决方案！谢谢！ – micronyks 2017-02-26 07:50:25

没有背景图片（如果只是背景颜色，则可以）。不要使用不透明度，而应使用.email：hover中较不透明的版本来替换背景图片。

来源

2010-07-30 21:53:15

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

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

来源

2010-07-30 22:00:27

可怕的解决方案，不存在的问题。 – You 2010-07-30 22:40:21

在任何与CSS3不兼容的浏览器中都存在它。我同意在CSS3中，你的解决方案是最好的。 – 2010-07-31 02:36:53

CSS不透明度和文本问题

回答

相关问题