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>

然后给每个链接一个背景图像，如;

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

Answer 1

你可以这样做：

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

用这样的css：

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>

假设你的图像是100px X 50px：

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坐标。

导航图标图像

2 个答案: