Как правильно установить положение фона при работе с оживленным изображением? - PullRequest
Новая
       0

Как правильно установить положение фона при работе с оживленным изображением?

0 голосов
/ 30 ноября 2018

Я работаю над элементом nav на моем веб-сайте и хочу добавить несколько изображений в виде интерактивных ссылок в вертикальный список, которые можно использовать в качестве элемента навигации: 

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

Приведенный выше код работает ипоказывает то, что я хочу, чтобы оно показывало (одна часть спрайта, домашнее изображение), когда я устанавливаю координаты положения фона на 0 0. Но если я устанавливаю координаты на что-либо еще, изображение не появляется.Как правильно отобразить различные части изображения:

прикреплено изображение, с которым я работаю.

Sprite containing the menu elements

1 Ответ

0 голосов
/ 30 ноября 2018

Необходимо указать background-position так же, как если бы вы указали left и top для элемента с position: relative.

E.г.если вам нужно переместить элемент на 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 и для программ чтения с экрана.

Также я упростил ваш код, возможно, он вам тоже пригодится.

...