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

Question

我只是想用我在一本网页设计杂志上看到的这个小技巧来制作一些图像翻转，但我遇到了一点麻烦。我的尝试是一次可怕的失败，哈哈。我只想看到上半部分（42 像素高），然后翻转时的下半部分（显然是-42 像素）

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

Answer 1

这一切都与 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 */
}

演示

---

根据您的评论：用锚点包装

( ），具体操作如下：

1. 将
   替换为 。这是因为锚点的有效子元素必须是内联元素
2. ，但是内联显示的元素不会接受尺寸！因此，请使用跨度上的一个附加 CSS 属性来解决这一新问题：display: inline-block。

演示 2

Answer 2

试试这个：

<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 3

这是图像翻转的基本框架。

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>

重要的部分是背景位置，在按钮上正常状态设置为“顶部”，当您鼠标悬停时背景位置为“底部”。

假设包含两个按钮状态的图像的高度为 84 像素，这样就可以正常工作。