Question

我一直在尝试在每个菜单项的MENU个简单图标中使用css精灵而没有任何运气，因为它需要16px widht设置。但是，如果我这样做，整个事情就会搞砸（特别是李）。

图片精灵位于HERE，但我不知道如何让它自己工作，我一直在努力，没有运气，也没有影响当前的功能。（li ul需要有一个auto的widht来获得父级并自动调整到跨度）。

我需要帮助：（。

解决方案：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

图像精灵只是一个仅部分显示的图像。这是通过创建一个元素（通常是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将在其背景中显示图像的不同部分。

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

1 个答案: