在带有文本的图标精灵图像之间淡入淡出

Question

我正在尝试编辑 link 带有图标以在颜色之间淡入淡出。我正在使用 :before 作为背景图像，这是一个精灵，因为当它只是 png 文件时，我不知道如何仅使用 css 来更改图标的颜色。

我发现这个 post 可能是一个答案（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; 
}*/

如何修复它，使其从一种颜色淡化为另一种颜色...

* 更新 * 在其他人的帮助下（谢谢大家！），我能够编辑代码。但是，它并没有像我想要的那样排在中间。这是我用于网站的实际 link。显示的第一个代码只是一个例子，看看我如何让它工作。无论如何，我最终使用 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 代码中看到的那样，如果将鼠标悬停在图标上，图标和文本都有效，但如果将鼠标悬停在文本上，则只有文本有效。我该如何解决？

Answer 1

要更改颜色，您可以将 CSS 转换与 -webkit-filter 合并，当发生某些事情时，您将调用您选择的 -webkit-filter。例如：

            img {
                        -webkit-filter:grayscale(0%);
                        transition: -webkit-filter .3s linear;
                    }
                    img:hover 
                    {
                        -webkit-filter:grayscale(75%);
                    }

Answer 2

您已为 #button a:hover:before { ... } 声明了 opacity: 0;，这就是它在您的 codepen 演示中不起作用的原因。

Answer 3

你必须在不同的 DOM 元素上应用不同的图像样式，一旦它是锚标记，第二个是跨度（在我的示例中），然后切换不同位置的不透明度背景。 CodePen Link

片段

.button {
 display: inline-block;
 position: relative;
 text-indent: 30px;
 width: 36px;
 height: 30px;
 background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
  text-decoration: none;
  font-size: 1.5em;
  transition: color 0.4s ease;
  line-height:1.5em;
}
.button:hover{
  color:#f68e07;
}
.button span {
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
 background-position: 0 -29px;
 opacity: 0;
 -webkit-transition: opacity 0.5s;
 -moz-transition:    opacity 0.5s;
 -o-transition:      opacity 0.5s;
}
.button:hover span {
 opacity: 1;
}

<a href="#" class="button">Button<span></span></a>

Answer 4

我明白了！！！感谢大家的帮助！我成功了！！！

这是工作代码笔：http://codepen.io/kikibres/pen/LVKQxE

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-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 span {
    position: relative;
  display: inline-block;
    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: "";
  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:hover a {
color: #f68e07;
}
#button:hover a span:before {
    opacity: 1;
}

在带有文本的图标精灵图像之间淡入淡出

fade between icon sprite image with text

html

css

css-transitions