我是 sprite 的新手，这个特殊的任务让我感到困惑 - 请帮助别人。
我目前使用两个背景图片，如下所示:
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;
}
为了缩短页面加载时间，我现在想使用一个图像，一个 sprite。我认为这是独一无二的，因为我想在背景上使用相同的图像两次，我在右上角显示图像的一部分，在浏览器窗口的左下角显示图像的一部分。我要显示的图像的两个部分都是 600 像素宽 x 400 像素高。
如果新图片宽 1720 像素，高 1100 像素，名为“background.jpg”，我该如何调整代码来实现这一点？
最佳答案
相反，您可以在 body 中创建两个 div:
不像 CSS 那样简单，但它允许您使用您的 Sprite 。
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;
}
关于使用 sprite 的 CSS 两个背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10364643/