css 精灵图像位置

Question

我需要使用精灵图像，而不是简单的背景图像。背景图用在

右中

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

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

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

background-location-position [right center] and background-sprite-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"

center

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

css 精灵图像位置

css sprite image position

css

css-sprites

background-image