Question

我想优化我的代码。我认为我说如果我将多个图像组合成一个文件然后我就不能使用position属性，除非图像是背景图像的一部分。但我不知道如何设置我的DIV。我需要设置DIV的宽度和高度吗？我是否需要进行显示：阻止或类似的东西？

这是我到目前为止的代码：

<ul>
<li><a class='disabled' ><img width='16' height='16' src='../../Content/Icons/home.png' />Home</a></li>
<li><a href='xx'  title='xx'><img width='16' height='16' src='../../Content/Icons/xx.png' />xx</a></li>
<li><a href='yy'  title='yy'><img width='16' height='16' src='../../Content/Icons/yy.png' />yy</a></li>
</ul>

Answer 1

如果我得到了这个，你想要带有图标的链接，对吧？

附加一些类

<a class="icon home">Home</a>

添加CSS

.icon
{
    padding: 0 0 0 20px;
    background-repeat: no-repeat;
}

.icon.home
{
    background-image: url('path/to/your/icon_home.png');
    background-position: 0px 20px;
}

现在你只需要玩你的填充物。

EDIT
看起来你想要使用精灵。 A List Apart has a good article about sprites here.

Answer 2

如果你在一个文件中有多个图像，我建议你添加一些类，如@pduersteler所说。

ul li a { display: inline-block; position: relative; width: 16px; height: 16px; }
ul li a.one { background: url('../../Content/Icons/home.png') left top no-repeat; }
ul li a.two { background: url('../../Content/Icons/home.png') -16px top no-repeat; }
ul li a.three { background: url('../../Content/Icons/home.png') -32px top no-repeat; }

像这样......

如何将img替换为具有背景图像的DIV？

2 个答案: