html - 使用精灵图像

Question

我有一个由 2 个图像组成的图像，一个精灵。

我想要做的是把它作为一个精灵，所以当我将鼠标悬停在它上面时，图像的底部是可见的。

我知道我可以background-position在 CSS 中做到这一点，但这是<img>HTML 中的一个标签。

我怎么能这样做？

谢谢

Answer 1

使用包含 div 的 CSSoverflow属性设置为hidden. 然后，您可以根据需要使用 JavaScript 调整包含 div 的大小。

Answer 2

这就是如何通过 CSS 过渡来实现的：

http://jsfiddle.net/NGWuZ/

标记：

<div class="container">
    <img src="my_image_url">
</div>​

CSS：

.container{
    height: 175px;
    overflow: hidden;
    position: relative;  
}
.container img{
    position: absolute;
    top: 0;
    left: 0;
    transition: top 2s;
    -moz-transition: top 2s; /* Firefox 4 */
    -webkit-transition: top 2s; /* Safari and Chrome */
    -o-transition: top 2s; /* Opera */
}

.container img:hover{
   top: 175px;
}

Answer 3

在您的情况下，我会向现在绝对定位的图像添加一个容器，当悬停容器时，我会移动图像位置。

HTML：

<div class="myContainer">
   <img src="mySpriteImage" alt="" width="50" height="50" />
</div>

CSS：

.myContainer {
    position:relative;
    overflow:hidden;
    width:50px;
    height:25px;
}
.myContainer img {
    position:absolute;
    top:0;left:0;
}
.myContainer:hover img {
    top:auto;bottom:0;
}