Question

我想创建一个带有ul元素的导航栏，其中导航栏上的每个项目都是无图像，仅限图像的链接。所以我这样设置：

<ul>
    <li><a href="./"></a></li>
</ul>

然后我意识到我并不知道如何在那里获取图像。我想到了两个想法，但每个想法都有问题：

在锚点中添加img标记。这不是一个好的内容/设计分离，而且，如果我想在用户将鼠标悬停在它上面时（我这样做）改变图像，它会变得更加复杂。
使用CSS背景图片，但现在我必须让锚点的宽度和高度等于图像的尺寸，这样每次我更改图像时都会强制修改我的代码。

仅限图像的导航栏很常见，有没有标准的方法来执行此操作？

Answer 1

使用两者，使用带透明度和bacground图像的图片，这样您就可以在悬停时更改img，透明img会为您拉伸<a>标记：

<a><img src="some-image.jpg" /></a>

和css这样的事情：

a img{
   opacity:0;
}
a{
   background-image:url(some-image.jpg);
}
a:hover{
   background-image:url(some-other-image.jpg);
}

Answer 2

我以这种方式使用它：

<强> CSS

ul{
    display:inline-block;
    width:350px;
    height:150px;
}
ul li{
    display:block;
}
ul li a, ul li{
    display:inline-block;
    width:100%;
    height:100%;
}
ul li.fb a{
    background:url(http://placehold.it/350x150) no-repeat left center;
}
ul li.tw a{
    background:url(http://placehold.it/350x150) no-repeat left center;
}

<ul>
    <li class="fb"><a href="http://facebook.com"></a></li>
    <li class="tw"><a href="http://twitter.com"></a></li>   
</ul>

你可以将所有这些图像放在精灵等中......

http://jsfiddle.net/sthAngels/842d4493/

Answer 3

实现这一目标的最简单方法是在锚点本身中插入悬停图像（当然它将具有与普通图像相同的尺寸），并在其上方堆叠元素，这将具有正常状态＆＃39;图像作为背景。然后在悬停时，隐藏堆叠元素以显示悬停图像。锚本身现在将具有图像尺寸，堆叠元素也是如此。

HTML：

<ul>
    <li><a href class="link1"><img src="link1-hover-image.png"><span></span></a></li>
    <li><a href class="link2"><img src="link2-hover-image.png"><span></span></a></li>
    <li><a href class="link3"><img src="link3-hover-image.png"><span></span></a></li>
</ul>

的CSS：

a { position: relative; }
a img { vertical-align: bottom; } /* little hack for correct placement */
a span { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
a:hover span { opacity: 0; }

.link1 span { background-image: url(link-1-image.png); }
.link2 span { background-image: url(link-2-image.png); }
.link3 span { background-image: url(link-3-image.png); }

DEMO

但是就像所有人都说的那样;尽可能使用普通的CSS。更快，更容易维护。因此，如果真的无法使用css来设置按钮的样式，那么只能使用它。

使用CSS的仅图像导航栏的最佳做法

3 个答案: