在处理拼接图像时，如何正确设置背景位置？

Question

我正在处理网站的nav元素，我想在垂直列表中添加一些图像作为可单击链接，以用作导航元素：

<nav>
    <ul style="display:inline">
        <li style="height: 12px; width:34px; background: url(backgroundsprite.gif) 0 0;"></li>
    </ul>
<nav>

当我将背景位置坐标设置为0 0时，上面的代码工作并显示了我想要显示的内容（精灵的一部分，主图像）。但是，如果我将坐标设置为其他任何值，则图像不会不露面。如何正确显示拼接图像的不同部分？

附件是我正在使用的图像。

Answer 1

您需要以与为background-position的元素指定left和top的方式指定position: relative。

E。 G。如果您需要将元素上移10像素，则可以设置top: -10px。
用相同的方式移动背景：

a {
  display: block;
  height: 16px;
  margin-top:3px;
  background-image: url(https://i.stack.imgur.com/n1GGF.gif);
}

a[href='home.html'] {
  width: 38px;
  background-position: -36px 0;
}

a[href='aboutme.html'] {
  width: 60px;
  background-position: 0 -18px;
}

<nav>
  <a href="home.html"></a>
  <a href="aboutme.html"></a>
<nav>

但是我强烈建议您使用文字而不是文字图片。它会为您带来好处：轻松更改文本本身及其字体属性，对SEO和屏幕阅读器更好。

我还简化了您的代码，也许您会发现它也很有用。