導航圖標圖像

Question

所以我想使用一些圖標圖像作爲我的網站導航。目前，我正在使用HTML5導航標籤

<nav> 
    <a href="index.html"><img src="images/whatever.png"/></a> 
    <a href="dash.html"><img src="images/whatever.png"/></a> 
    </nav> 

對於最佳實踐我不希望有在HTML的圖像，所以我想知道如果解決這個問題的正確的方法是給每個鏈接如下一個僞類似;

<nav> 
    <a class="home" href="index.html"></a> 
    <a class ="dash" href="dash.html"></a> 
    </nav> 

然後給每個鏈接一個背景圖像;像這樣的CSS

<nav> 
    <a class="home" href="index.html">Home</a> 
    <a class="dash" href="dash.html">Dash</a> 
</nav> 

：

.home { 
    background-image: url(../whatever.png); 
} 

Answer 1

你可以做這樣的

nav a { 
    display:inline-block; //so you can set width and height 
    text-indent:-999em; //to hide the text 
} 
.home { 
    background-image: url(../whatever.png); 
    width: 100px; //image width 
    height: 50px; /image height 
} 

Answer 2

你也可以使用一個精靈表，以節省文件大小和圖像的請求。 （這個CSS Sprite Generator在生成精靈圖像中很有用）。

所以用這個代碼：

<nav> 
    <a class="home" href="index.html">Home</a> 
    <a class="dash" href="dash.html">Dash</a> 
</nav> 

並假設您的圖片100像素X 50像素：

nav a { 
    /* whatever positioning rules or floats you need for the links */ 
    height: 50px; 
    width: 100px; 
    text-indent: -9999px; 
} 

.home { background: url(iconsprite.png) 0 0 no-repeat; } 
.dash { background: url(iconsprite.png) 0 -100 no-repeat; } 

凡0 0和0 -100是x和圖像的左上角的y座標在精靈表中。