1

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

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

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

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

4

2 回答 2

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;
}
于 2012-05-23T22:26:44.060 回答
1

这是一个工作示例为您提供的答案。

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
这是我遇到的方法。可能有更好的方法来处理这个问题。

于 2012-05-24T16:24:14.353 回答