Центрировать фоновое изображение из спрайта
У меня есть меню следующим образом:
<ul>
<li><a href="#">First Item</a></li>
<li><a href="#">Long Item</a></li>
<li><a href="#">Very very short Item</a></li>
<li><a href="#">Another Item</a></li>
<li><a href="#">Last Item</a></li>
</ul>
Я хотел бы использовать изображение спрайта в качестве фона в CSS. Я бы хотел, чтобы изображение было отцентрировано в пунктах меню различной ширины. В настоящее время для первого элемента правильный CSS это:
background: url(images/sprite.png) no-repeat -20px -10px;
Для второго:
background: url(images/sprite.png) no-repeat -24px -10px;
Для третьего:
background: url(images/sprite.png) no-repeat -32px -10px;
И так далее. Я не знаю точную ширину каждого элемента, и она может измениться в любой момент.
У меня есть доступ к структуре HTML, поэтому я могу добавить некоторые теги, если это необходимо. Можно ли центрировать фоновое изображение в этом случае?
2 ответа
По сути, вы создаете псевдоэлемент, используйте position: absolute
а также left:50%
центрировать это.
li a { position: relative;} /* makes the (position:absolute) below work */
li a:after{
content: "";
position: absolute;
top: 0;
left: 50%; /* centers the left edge of the sprite */
margin-left: -8.5px; /* this centers the actual sprite--this is half the sprite-window width. if you don't do this, the left edge will be centered instead of the center of the sprite. */
width: 15px; /* set window to see sprite through */
height: 18px; /* set window to see sprite through */
background: url(https://www.google.com/images/nav_logo129.png) no-repeat -15px -327px; /* set up the sprite. Obviously change this fto make each one different. */
}
Если фоновое изображение представляет собой вертикально спрайтовый лист, вы можете горизонтально центрировать каждый спрайт следующим образом:
li a {
background-image: url(images/sprite.png);
background-repeat: none;
background-position: 50% [y position of sprite];
}
Если фоновое изображение представляет собой горизонтально спрайтовый лист, вы можете центрировать каждый спрайт по вертикали следующим образом:
li a {
background-image: url(images/sprite.png);
background-repeat: none;
background-position: [x position of sprite] 50%;
}
Если ваш спрайт-лист компактен или вы не пытаетесь центрировать фоновое изображение в одном из вышеупомянутых сценариев, эти решения не применяются.