css sprite图像位置

时间:2016-10-26 09:50:52

标签: css background-image css-sprites

我需要使用精灵图片,而不是简单的背景图片。 背景图像用于< 右中心位置。 UL>:

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

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

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

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

1 个答案:

答案 0 :(得分:0)

我使用伪元素管理:

#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”
  • 获得中心

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