使用<img>的雪碧图
使用<img>的雪碧图
提问于 2012-06-26 23:04:25
我有一个由2个图像组成的图像，一个精灵。
我想要做的是，让这个像一个精灵一样，所以当我将鼠标悬停在它上面时，图像的底部是可见的。
我知道我可以在CSS中使用background-position来做这件事，但这是一个<img>标签。
我怎么能这样做呢？
谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-06-26 23:14:47
这就是如何通过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;
}Stack Overflow用户
发布于 2012-06-26 23:07:06
使用CSS属性overflow设置为hidden的包含div。然后，您可以根据需要使用JavaScript调整包含的div的大小。
Stack Overflow用户
发布于 2012-06-26 23:14:57
在你的情况下，我会添加一个容器到图像中，它现在是绝对定位的，当悬停容器时，我会移动图像位置。
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11210286
复制相关文章
相似问题
腾讯云开发者
