css - 如何在这种菜单中使用 css Sprite ？

Question

我一直在尝试在此 MENU 中使用 css sprites intead 每个菜单项的简单图标没有任何运气，因为它需要设置 16px 的宽度。但如果我这样做，整个事情就会变得一团糟(特别是 li)。

图像 Sprite 位于HERE但我不知道我应该用 CSS 让它自己工作，我一直在尝试，但没有运气，也没有影响当前的功能。 (li ul 需要有一个 auto 的宽度才能获得父宽度并自动调整到跨度)。

我需要这方面的帮助:(。

解决方案:CSS

.nav li a{

line-height: 16px; /* new position */
position: relative; /* new position */
padding-left: 24px; /* new position */

}

.iconized i{
background: url("images/icons/menu.png") no-repeat scroll transparent;
display: inline-block;
height: 16px;
vertical-align: middle;
width: 16px;
margin-right: 3px;

position: absolute;  /* new position */
left: 5px;/* new position */
}

.iconized li .user{
background-position: -2px -2px;
}

解决方案:HTML

<ul class="nav iconized left">
    <li><a href="#"><i class="user"></i><span>Profile</span></a></li>
</ul>

Answer 1

图像 Sprite 只是一张只显示了一部分的图像。这是通过创建一个元素(通常是一个 div，但也可以是其他元素)来实现的。你给元素一个固定的宽度和高度(在你的例子中是 16px)。然后使用 background css 属性将图像的一部分放在元素的背景中。通过设置 background-position css 属性，您可以通过指定应位于元素左上角的背景图像像素的坐标来定义显示图像的哪一部分。

所以在你的 CSS 中你要写这样的东西:

.icon {
    background-image: url('yoursprite.png');
    width: 16px;
    height: 16px;
}

.icon.i1 {
    background-position: 0 0; /* Second image on the first row */
}
.icon.i2 {
    background-position: 0, -16px; /* Second image on the first row */
}
/* Etc */

然后在你的 HTML 中你这样写:

<div class="icon i1"></div>
<div class="icon i2"></div>
<div class="icon i3"></div>
<div class="icon i4"></div>

这样，每个 div 将在其背景中显示图像的不同部分。