Question

我有一张精灵图像，上面有我幻灯片的控件。

当用户将鼠标悬停在每个控件上时，我想更改每个控件的背景位置，以使其看起来有效。

我正在使用：

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

我的代码位于this fiddle（显然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/

进行演示

Answer 2

您的代码会更改背景位置。

 background-position: 150px 210px;

要使其面向您需要更改背景颜色，添加不透明度并为其设置动画。

  background: rgba(255,255,255,0);

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

2 个答案: