a {
float: left;
width: 32px;
height: 32px;
text-align: left;
text-indent:-9999px;
background: url('../img/button.png') no-repeat 0 0;
-webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */
-moz-transition: background 300ms ease-in 2s;
-o-transition: background 300ms ease-in 2s;
transition: background 300ms ease-in 2s;
-webkit-transition-property: background;
-webkit-transition-duration: 300ms;
-webkit-transition-timing-function: ease-in;
-webkit-transition-delay: 100ms;
-moz-transition-property: background;
-moz-transition-duration: 300ms;
-moz-transition-timing-function: ease-in;
-moz-transition-delay: 100ms;
-o-transition-property: background;
-o-transition-duration: 300ms;
-o-transition-timing-function: ease-in;
-o-transition-delay: 100ms;
transition-property: background;
transition-duration: 300ms;
transition-timing-function: ease-in;
transition-delay: 100ms;
}
a:hover {
background:position: 0 -32px;
}
..目前它有滚动向上/向下的效果,但我想背景改变与淡入淡出的效果,我该怎么改变在CSS？
谢谢！
解决方法
您无法在两个背景图像之间进行转换,因为浏览器无法知道您要插值的内容.如您所见,您可以转换背景位置.如果您希望图像在鼠标悬停时淡入淡出,我认为使用CSS转换的最佳方法是将图像放在包含的元素上,然后将背景颜色设置为透明的链接本身：
span {
background: url(button.png) no-repeat 0 0;
}
a {
width: 32px;
height: 32px;
text-align: left;
background: rgb(255,255,255);
-webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
-moz-transition: background 300ms ease-in 200ms;
-o-transition: background 300ms ease-in 200ms;
transition: background 300ms ease-in 200ms;
}
a:hover {
background: rgba(255,0);
}
