当鼠标指针悬停在我的链接上时,有没有办法阻止不透明度影响我的链接文本?我只想让不透明度影响图像。
这是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>
答案 0 :(得分:9)
简短回答:不。
答案很长:是的,如果您使用rgba
颜色而不是opacity
属性。例如,以下内容将为您提供20%不透明度的黑色背景和具有完全不透明度的黑色文本:
p {
background: rgba(0, 0, 0, 0.2);
color: #000000;
}
对于背景图像,请使用带有Alpha通道的PNG。
答案 1 :(得分:0)
没有背景图片(如果它只是背景颜色,你可以)。不使用不透明度,而是使用.email:hover。
中较少的不透明版本替换背景图像答案 2 :(得分:0)
是的,使用绝对定位从透明容器的上下文中取出文本。这也适用于背景图片!
<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>