淡入淡出背景但不显示文本 [英] Fade Background but NOT Text
本文介绍了淡入淡出背景但不显示文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我对div应用了CSS淡入/淡出解决方案,我对此很满意. 但是我只想将其应用于背景,而不是文本.我需要文字始终不透明.
I have applied a CSS fade in/out solution to a div, which im happy with, for the most part. However I only want to apply it to the background, not the text. I need the text to be fully opaque at all times.
请参阅示例: http://jsfiddle.net/howiepaul/gUAPV/33/
a.tab {background-color:#d4d4d4;
font-family: arial;
font-weight: bold;}
a.tab:hover {
opacity:1;
animation: tickhov 1.5s;
-moz-animation: tickhov 1.5s; /* Firefox */
-webkit-animation: tickhov 1.5s; /* Safari and Chrome */}
@-ms-keyframes tickhov {from {opacity:0.2;} to {opacity:1;}}
@-moz-keyframes tickhov /* Firefox */ {from {opacity:0.2;} to {opacity:1;}}
@-webkit-keyframes tickhov /* Safari and Chrome */ {from {opacity:0.2;} to {opacity:1;}}
a.tab{
opacity:0.2;
animation: letgo 1.5s;
-moz-animation: letgo 1.5s; /* Firefox */
-webkit-animation: letgo 1.5s; /* Safari and Chrome */}
@-ms-keyframes letgo {from {opacity:1;} to {opacity:0.2; visibility: hidden; display: none;}}
@-moz-keyframes letgo /* Firefox */ {from {opacity:1;} to {opacity:0.2; visibility: hidden; display: none;}}
@-webkit-keyframes letgo /* Safari and Chrome */ {from {opacity:1;} to {opacity:0.2; visibility: hidden; display: none;}}
任何帮助都会感激不尽.
Any help would be gratefully received.
非常感谢 豪伊
推荐答案
您应该在background-color
而不是opacity
上设置动画.仅供参考,如果这就是您要做的所有事情,则应使用过渡而不是动画,它们要简单得多.
You should be animating on background-color
not opacity
. FYI if this is all you're doing you should use transitions instead of animations, they're much simpler.
a.tab {
position:relative;
font-family: arial;
font-weight: bold;
background-color:rgba(212,212,212,.2);
-moz-transition:background-color 1.5s ease;
-webkit-transition:background-color 1.5s ease;
transition:background-color 1.5s ease;
}
a.tab:hover {
background-color:rgba(212,212,212,1);
}
这篇关于淡入淡出背景但不显示文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文