CSS使用sprite创建两个背景图像_Css_Background Image_Css Sprites

CSS使用sprite创建两个背景图像

css

CSS使用sprite创建两个背景图像,css,background-image,css-sprites,Css,Background Image,Css Sprites,我是新来的精灵，这个特殊的任务让我难以置信-请帮助别人我目前使用的两个背景图像如下： 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

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

我目前使用的两个背景图像如下：

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;
}

为了提高页面加载时间，我现在想使用一个图像，一个精灵。我认为这是独特的，因为我想在背景上使用相同的图像两次，在浏览器窗口的右上角显示图像的一部分，在左下角显示图像的一部分。我想展示的图像的两部分都是600像素宽，400像素高

如果新图像宽1720px，高1100px，名为“background.jpg”，我将如何调整代码以实现这一点？

您可以在

主体中创建两个div
：

不仅仅像CSS那样简单，它还允许您使用精灵
HTML：
<body>
  <div id="bgOne"></div>
  <div id="bgTwo"></div>
</body>

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;
}

下面是一个工作示例的答案

您可以参考以下链接了解更多信息。





这就是我遇到的方法。
可能有更好的方法来处理这个问题 重复帖子：-你觉得我下面的答案有用吗？没有回应？
 <div class="bg" id="bg1"></div>
 <div class="bg" id="bg2"></div>

.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;
}