使用CSS精灵两个背景图片(CSS two background images using a sp

我是新来的精灵和这个特殊的任务是令人难以置信的我 - 请帮助别人。

我目前使用两个背景图片，如下所示：

body {
background-attachment: fixed;
background-image: url("images/bktopright.png"), url("images/bkbottomleft.png");
background-position: right top, left bottom;
background-repeat: no-repeat;
line-height: 1;
min-width: 1150px;
}

为了提高页面加载时间我现在想用一个形象，一个精灵。我觉得这是我想的背景，我在那里显示右上方的图像的一部分，并在浏览器窗口的左下方的图像的一部分使用相同的图像两次独一无二的。我想显示图像的两个部分是600px的宽400像素。

如果新的图像是1720px宽1100px高，被称为“background.jpg”我将如何调整代码来实现这一目标？

Answer 1:

你可以，而是创建两个divs的内body ：
不是那么简单的CSS只，但它可以让你使用你的精灵。

该HTML：

<body>
  <div id="bgOne"></div>
  <div id="bgTwo"></div>
</body>

CSS的 ：

body {
  min-width: 1150px;
}

#bgOne, #bgTwo {
  position: fixed;
  height: 400px;
  width: 600px;
}

#bgOne {
  background: url('images/bktopright.png') no-repeat right top;
  right: 0;
  top: 0;
}

#bgTwo {
  background: url('images/bkbottomleft.png') no-repeat left bottom;
  left: 0;
  bottom: 0;
}

Answer 2:

下面是你的回答与工作的例子。

http://jsfiddle.net/ctLZY/

 <div class="bg" id="bg1"></div>
 <div class="bg" id="bg2"></div>

CSS

.bg{
    background-image: url("someimage.png");
    background-repeat: no-repeat;
    position:fixed;
    width:100px;
    height:100px;
}
#bg1{
    background-position: -50px 0px;
    right:0px; top:0px;
}
#bg2{
    background-position: 50px 0px;
    left:0px; bottom:0px;
}

您可以参考获取更多信息下面的链接。
Css3.info
CSS-技巧
这是我碰到的方法。可能有更好的方法来处理这个问题。

文章来源: CSS two background images using a sprite