4

我的菜单如下：

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

4

2 回答 2

12

JSFiddle 演示。

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

}
于 2013-07-01T22:51:30.220 回答
1

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

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

如果您的精灵表很紧凑，或者您不想将背景图像置于上述场景之一的中心，则这些解决方案不适用。

于 2015-04-25T00:29:19.437 回答