Question

我想要应用背景的div大于我的精灵，而我想用作背景的精灵部分是从精灵顶部开始的100px。

如何将div的背景设置为我想要的精灵的一部分，和将它放置在div的右侧。

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

我希望将“我想要的”背景推到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的右侧。精灵的宽度小于div。这可能吗？或者我是否需要将部分从精灵中撕掉并让它成为自己的图像？谢谢！

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进行了测试，一切似乎都运行正常。

Answer 2

当我想要这样做时，我会将精灵定位在精灵PNG的右侧，并且在它下方有足够的垂直空间，以确保图形中的下一个精灵不会在底部看到格。

在CSS中，我将背景图像的水平位置定义为right：

div { 
  background: red url('sprite.png') right -100px no-repeat;
}

这是您的JSBin的编辑版本：http://jsbin.com/kohivibu/1/edit

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

2 个答案: