Question

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

我目前使用两个背景图片：

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宽，400px高。

如果新图像宽度为1720像素，高度为1100像素，并称为“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-Tricks
这是我遇到的方法。可能有更好的方法来处理这个问题。

使用精灵的CSS两个背景图像

2 个答案: