Question

我的菜单如下：

<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结构，因此如果需要，我可以添加一些标签。在这种情况下是否可以将背景图像居中？

Answer 1

JSFiddle demo

基本上，您创建了一个伪元素，使用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. */

}

Answer 2

如果您的背景图像是垂直对齐的精灵表，您可以像这样水平居中每个精灵：

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%;
}

如果您的精灵表是紧凑的，或者您没有尝试将您的背景图像置于上述某个场景中心，则这些解决方案不适用。

从精灵的中心背景图像

2 个答案: