Question

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

宽度也是42px。有人可以写点什么来实现吗？图片： http://img826.imageshack.us/img826/6568/homebi.png

Answer 1

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

#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>，这是做什么的：

将<div>换成<span>。这是因为锚点的有效子元素必须是内联元素
但内联显示的元素不会表现为接受尺寸！因此，使用一个额外的CSS属性修复此新问题：跨越display: inline-block。

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

重要的部分是背景位置，当按钮正常状态设置为“顶部”时，当你翻转背景位置是“底部”时。

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

如何制作CSS翻转图像？（子画面）

3 个答案:

如何制作CSS翻转图像？ （子画面）

3 个答案:

如何制作CSS翻转图像？（子画面）