sprite圖像使用<img>

Question

我有一個由2個圖像組成的圖像，一個精靈。

我正在做的是將它作爲精靈，所以當我將它懸停在它上面時，圖像的底部部分是可見的。

我知道我能做到這一點使用CSS中background-position，但是這是在HTML的標籤<img>。

我該怎麼做？

感謝

Answer 1

這是如何可以用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 2

使用其中的CSS屬性格式overflow設置爲hidden一個包含分區。然後，您可以根據需要使用JavaScript來調整包含div的大小。

Answer 3

在你的情況，我想補充一個容器的圖像，這是現在絕對定位，當懸停con tainer，我會移動圖像的位置。

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; 
}