淡化背景但不影响文本

Question

我已经为一个div应用了CSS淡入/淡出的解决方案，大体上我很满意。 然而，我只想将其应用于背景，而不是文本。我需要文本始终完全不透明。

请参见示例： 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;}}

任何帮助都将不胜感激。

非常感谢， 豪伊

- howiepaul

---

你可以使用CSS过渡效果来实现它：http://jsfiddle.net/gUAPV/36/ - Sam

Answer 1

你应该在background-color上进行动画处理而不是opacity。 如果你只是做这个，你应该使用转换而不是动画效果，因为它们更简单。

jsFiddle

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);
}

- Daniel Imms

---

谢谢丹尼尔，我认为这是最好的选择！ - howiepaul

Answer 2

不需要使用动画或编写冗长的代码。如果只需更改背景而保留文本，应使用CSS过渡。它们更简单易用，可以用很少的代码实现。这是演示fiddle。

http://jsfiddle.net/gUAPV/37/

a.tab {
    background-color: #f4f4f4; 
    font-family: arial;
    font-weight: bold;
    font-size : 40px;
}

a.tab:hover {
   background-color:#d4d4d4;

   -webkit-transition: background 300ms ease-in 200ms;
   -moz-transition: background 300ms ease-in 200ms;
   -o-transition: background 300ms ease-in 200ms;
   transition: background 300ms ease-in 200ms;
}

我已经增加了字体大小以使其更加突出，您可以根据自己的使用进行调整。

附注：如果您想要了解更多关于CSS转换的内容，这里有一些有用的链接: W3.Org链接 Mozilla开发者论坛链接 希望这能帮到您 :)

- Raman