所以我想为我的站点导航使用一些图标图像。目前我正在使用 HTML5 Nav 标签执行以下操作
<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);
}
最佳答案
你可以这样做:
<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
}
关于css - 导航图标图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7402705/