Question

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

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

我知道我可以使用CSS中的background-position执行此操作，但这是HTML中的<img>标记。

我怎么能这样做？

由于

Answer 1

使用CSS属性overflow设置为hidden的包含div。然后，您可以根据需要使用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;
}

使用<img/>精灵图像

3 个答案: