Question

我正在尝试创建一个导航菜单，使图像与其他图像保持一致，以显示其在特定页面上的图像。它也与悬停项目相同。我不确定最佳解决方案是什么，在搜索时我完全感到困惑，因为我应该如何去做。我在html中的菜单设置如此。

    <ul id="main-nav">
    <li id="list-1" class="item1"><a href="#"><img src="images/nav1_0.png"></a></li>
    <li id="list-2" class="item2"><a href="#"><img src="images/nav2_0.png"></a></li>
    <li id="list-3" class="item3"><a href="#"><img src="images/nav3_0.png"></a></li>
    <li id="list-4" class="item4"><a href="#"><img src="images/nav4_0.png"></a></li>
    <li id="list-5" class="item5"><a href="#"><img src="images/nav5_0.png"></a></li>
    <li id="list-6" class="item6"><a href="#"><img src="images/nav6_0.png"></a></li>
    </ul>

我以为我应该使用背景图片，但是如何在li元素中添加没有内容的菜单链接？

Answer 1

您可以更改<a>标记的显示以阻止，并指定所需大小以匹配背景图像的大小。我还建议使用精灵作为背景图像，只是改变背景位置。

全部放在一起：

#main-nav li a {
    display: block;
     /* in this example I am using width of 50px and height of 20px for the background image */
    width: 50px;
    height: 20px;
     /* note: nav.png is assumed to be name of new sprite */
    background-image: url('images/nav.png');
}

/* There assume sprite is horizontally arranged (i.e. 300px wide by 20px high) */
#main-nav li.item1 a {
    background-position: 0px 0px;
}

#main-nav li.item2 a {
    background-position: -50px 0px;
}

...

#main-nav li.item6 a {
    background-position: -250px 0px;
}

如果你想要一个悬停条件，你可以通过向你的精灵添加第二行图像（即在这个例子中使其为300px x 40px）将其添加到精灵中。并添加如下规则：

#main-nav li.item1 a:hover {
    background-position: 0px -20px;
}

#main-nav li.item2 a:hover {
    background-position: -50px -20px;
}

...

#main-nav li.item6 a:hover {
    background-position: -250px -20px;
}

精灵是你应该在这里学到的关键概念。单个组合图像小于单个图像，并且要求浏览器需要较少的整体二级请求。这意味着对于具有悬停条件的背景图像，您需要单个图像下载而不是12个。

如何将图像用于活动链接和悬停链接？

1 个答案: