Question

我需要使用精灵图片，而不是简单的背景图片。背景图像用于＆lt; 右中心位置。 UL＆gt;：

  background-image: url(../images/breadcrumbs_3.jpg);
  background-position: right center;
  background-repeat: no-repeat;

现在我需要添加特定的精灵位置（例如-48px 0px）

有没有办法标记这两个位置：

background- 位置 -position [右中心]和background- 精灵 -position [-48px 0px]？

Answer 1

我使用伪元素管理：

#breadcrumbs ul::after {
    content: "";
    background-image: url("../images/sprite-icon.png");
    background-position: -48px 0;
    display: inline-block;
    width: 24px;
    height: 35px;
    vertical-align: middle;
}

我使用“after”获得正确。
我使用“vertical-align”

中心

我更喜欢更简单的解决方案。。

css sprite图像位置

1 个答案: