【发布时间】：2015-08-20 22:04:04
【问题描述】：
我正在尝试编辑带有图标的链接以淡化颜色。我正在使用 :before 作为精灵的背景图像，因为当它只是 png 文件时，我不知道如何仅使用 css 来更改图标的颜色。
我发现这篇文章可能是一个答案（CSS3 - Fade between 'background-position' of a sprite image）并尝试根据我的需要对其进行修改，但它不起作用......
这里是代码和 codepen 演示 (http://codepen.io/kikibres/pen/KpjZKM)：
HTML
<div id="button"><a href="#">Button</a></div>
CSS
#button{
display: block;
}
#button a {
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #121e34;
text-decoration: none;
vertical-align: middle;
display: inline-block;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a:before {
content: "";
display: inline-block;
vertical-align: middle;
/*float: left;*/
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 0px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
}
#button a:hover:before{
content: "";
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 -29px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
display: inline-block;
/*text-indent: -9999px;*/
/*transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;*/
opacity: 0;
}
/*#button a:hover:before
{
opacity: 0.4;
}*/
如何修复它，使它从一种颜色褪色到另一种颜色...
* 更新 * 在其他人的帮助下（谢谢大家！），我能够编辑代码。但是，它并没有像我想要的那样排在中间。这是我用于网站的实际链接。显示的第一个代码只是一个示例，看看我如何使它工作。无论如何，我最终使用 span 将图标和文本分开，但现在我试图通过在 css 中使用“+”将它们绑定在一起，但它不起作用。这是codepen代码：http://codepen.io/kikibres/pen/GJbQKq
HTML
<div id="button"><a href="#"><span></span>Free Consultation</a></div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
/*text-indent: 80px;*/
/*width: 100%;
height: 52px;*/
/*background: url(http://i.imgur.com/32k8ugR.png) no-repeat;*/
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a span {
position: relative;
display: inline-block;
/*top: 0; left: 0; bottom: 0; right: 0;*/
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
/*display: inline-block;*/
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button a span:hover:before {
opacity: 1;
}
正如您从这个新的 codepen 代码中看到的那样，如果您将鼠标悬停在图标上，则图标和文本都有效，但如果您将鼠标悬停在文本上，则只有文本有效。我该如何解决？
【问题讨论】：
-
淡出什么？图标？
-
你的小提琴在工作jsfiddle.net/DIRTY_SMITH/7oebee2m/8什么不工作？
-
图标的淡化不起作用。我希望它改变图像精灵中的颜色。我发布的另一篇文章是关于成功更改颜色的图标精灵，但问题是它没有文字。我试图将其修改为有文本。
标签： html css css-transitions