CSS3背景图片位置过渡

Question

我想在我的网站 Logo 上使用 CSS3 悬停效果。容易，对吧？很好，但不是我想要的方式。

Link to my logo

它的上半部分是常规状态，下半部分是:hover 状态。

我有标准 CSS 用于更改 :hover 上的背景位置，但 CSS3 过渡会随着位置上下滑动图像。相反，我希望它只是淡入和淡出到新位置。

这在处理一张图像和两个位置时是否可能，或者我是否必须制作两张单独的图像(这并没有发生)？

Answer 1

您不需要两个单独的图像，但您确实需要两个单独的元素来放置您的 Logo 。

在此处查看实时版本:http://jsfiddle.net/BdY79/

.logo {
  width: 282px;
  height: 69px;
  background: #fff url(http://scferg.com/wp-content/themes/austere/images/logo.png) 0 -69px no-repeat;
  overflow: hidden;
}

.logo img {
  background-color: #fff;
  -webkit-transition: opacity 200ms ease;
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
}

.logo img:hover {
  opacity: 0;
}

在实践中，您可能想要链接您的 Logo ，您可以使用标签来执行此操作，因此没有额外的标记。它还可以优雅地降级。