如何制作CSS翻转图像？ （sprite）

Question

我只是试图用我在网页设计杂志中看到的这个小窍门来制作一个小图片滚动，但我只有一小部分的麻烦。我的尝试是一个可怕的失败大声笑。我只想看看上半部分（42像素高），然后翻转下半部分（显然-42像素）

宽度也是42px。有人可以写一些东西来实现这一点吗？ 图像： http://img826.imageshack.us/img826/6568/homebi.png

Answer 1

试试这个：

<style type="text/css"> 
.menu { 
} 
.menu a { 
    float: left; 
    display: inline; 
    width: 42px; 
    height: 42px; 
    text-decoration: none; 
} 
.menu a span { 
    display: block; 
    overflow: hidden; 
    height: 0; 
} 
.menu .home { 
    background: transparent url(http://img826.imageshack.us/img826/6568/homebi.png) 0 0 no-repeat; 
} 
.menu .link:hover { 
    background-position: 0 -42px; 
} 
</style> 

<div class="menu"> 
    <a href="#" title="Home" class="link home"><span>Home</span></a> 
</div> 

Answer 2

继承人的裸骨头图像翻转。

的CSS

.rollover{display:block; height:42px; width:42px; background:url(http://img826.imageshack.us/img826/6568/homebi.png) top;} 
.rollover:hover{background-position:bottom;} 
.rollover span{display:none} 

在HTML

<a href="#" class="rollover"><span>Home</span></a> 

最重要的部分是背景的位置，这对按钮正常状态设置为“顶部”，当翻转背景现在的位置是'底部'。

假设您的图像包含两个按钮状态是84px高这将工作正常。

Answer 3

全部关于background-position的初始值（非:hover）和最终值（:hover）的值。

#test { 
    height: 42px; 
    width: 42px; 
    background-image: url(http://img826.imageshack.us/img826/6568/homebi.png); 
    background-repeat: no-repeat; 
    background-color: transparent; 
    background-position: top; /* <-- key step #1 */ 
} 
#test:hover { 
    background-position: bottom; /* <-- key step #2 */ 
} 

Demo

---

根据您的评论回复：包裹<div>用锚（<a>），这里是做什么：

1. 交换<div>出去<span>。这是因为锚的有效孩子必须是内嵌元素
2. 但内联显示的元素不会表现出接受维度！因此，使用一个额外的CSS属性修复这个新问题：跨度上的display: inline-block。

Demo 2