css - 如何在 div 上使用 sprite 作为背景，将 sprite 的一部分定位到 div 的右侧

Question

我要应用背景的 div 比我的 sprite 大，我想用作背景的 sprite 部分距离 sprite 顶部 100px。

如何将 div 的背景设置为我想要的 sprite 的一部分，并将其定位到 div 的右侧。

我有:http://jsbin.com/yibesu/1/edit?html,css,output

我希望将“what-i-want”背景推到 div 的右侧，其余部分为红色。

我的 CSS:

div { 
  background: url('http://i.imgur.com/VBe5ey2.png') red;
  background-position: 0 -100px;
  background-repeat: no-repeat;
  width: 400px; 
  height: 200px; 
}

这就像我希望背景位置为“0 -100px”并推到 div 的右侧。 Sprite 的宽度小于 div。这可能吗？或者我是否需要将部分从 Sprite 中撕下来并让它成为自己的形象？谢谢!

Answer 1

你很接近。您唯一需要做的就是使用 background-position 将其右对齐。新的css如下:

div { 
  background: url('http://i.imgur.com/VBe5ey2.png') red;
  background-position: right -100px;
  background-repeat: no-repeat;
  width: 400px; 
  height: 200px; 
}

我用 Firefox、Chrome 和 IE11 对其进行了测试，一切似乎都正常。