如何製作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