CSS3背景图像位置淡入淡出过渡

Question

我有一个精灵图像与幻灯片的控件.

我想在用户将鼠标悬停在每个控件上时更改每个控件的背景位置,以使其看起来处于活动状态.

我在用:

-moz-transition: background-position 0.45s linear;
-webkit-transition: background-position 0.45s linear;
-o-transition: background-position 0.45s linear;

我的代码在这个小提琴中(显然bg图像不是我的控件而是随机图像).

我希望过渡效果是人们在悬停在某个项目上时所期望的(可能会淡出),而不是当前看起来像bg图像实际移动的效果.

有任何想法吗？

Answer 1

实现此目的的一种方法是在锚标记内放置一个隐藏的跨度,并设置背景位置以显示要在悬停时显示的精灵区域.最初,此跨度将隐藏为0不透明度.

然后,在悬停时,您可以转换不透明度以淡入它,而不是转换背景位置.

代码看起来像这样:

HTML

<a><span></span></a>

CSS

a {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;   
  background-image: url("http://example.com/somepic.jpg");
}

a span {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-image: url("http://example.com/somepic.jpg");
  background-position: 150px 210px;
  opacity: 0;
  -moz-transition: opacity 0.45s;
  -webkit-transition: opacity 0.45s;
  -o-transition: opacity 0.45s;
}

a:hover span {
  opacity: 1;
}???

你可以在http://jsfiddle.net/hespb/5/上演示这个