CSS 需要速度的背景缩短版本

Question

在我的网站上，99% 的图像都来自一个图像文件中的精灵 sheet 以改善用户体验（而不是让服务器传送数百个微小的单独图像）。

这是我的问题。我想在几个元素上使用 CSS 背景属性的缩短版本，以使用户下载更少的字节，但是这些尝试不起作用。

这是我想要实现的目标的简短示例。假设我有一个 ID 值为 X、Y 和 Z 的 DIV 标签。

然后我声明一个名为 spritesheet.jpg 的精灵 sheet 图像，如下所示：

#X,#Y,#Z {background:url('spritesheet.jpg')}

到目前为止，还不错。接下来，我希望 X 框为 600 像素 x 5 像素，Y 框为 10 像素宽 x 20 像素长，Z 框为 20 像素宽 x 10 像素长。然后我将其添加到我的 CSS 代码中：

#X {width:600px;height:5px}
#Y {width:10px;height:20px}
#Z {width:20px;height:10px}

那么我希望盒子 X 是红色的，盒子 Y 是绿色的，盒子 Z 是蓝色的：

#X {background-color:#FF0000}
#Y {background-color:#00FF00}
#Z {background-color:#0000FF}

假设精灵 sheet 宽 200 像素，长 40 像素。我希望盒子 X、Y 和 Z 占据精灵的三个不同部分 sheet。

#X {background-position:0 -10px}
#Y {background-position:-60px -20px}
#Z {background-position:-110px -20px}

而且，我希望方框 X 继续重复拼贴：

#X {background-repeat: repeat-x}

如您所见，声明占用了很多字节：

#X,#Y,#Z {background:url('spritesheet.jpg')}
#X {width:600px;height:5px}
#Y {width:10px;height:20px}
#Z {width:20px;height:10px}
#X {background-color:#FF0000}
#Y {background-color:#00FF00}
#Z {background-color:#0000FF}
#X {background-position:0 -10px}
#Y {background-position:-60px -20px}
#Z {background-position:-110px -20px}
#X {background-repeat: repeat-x}

我想做的是缩短上面的代码。这显然不起作用，因为它取消了图像并且新属性覆盖了所有内容：

#X,#Y,#Z {background:url('spritesheet.jpg')}
#X {width:600px;height:5px;background:#FF0000 0 -10px repeat-x}
#Y {width:10px;height:20px;background:#00FF00 -60px -20px}
#Z {width:20px;height:10px;background:#0000FF -110px -20px}

有人可以向我推荐一种无需每次都声明背景位置、背景重复和背景颜色即可加载 CSS 精灵的方法吗？

之所以问这个问题，是因为我想在我的网站上使用渐进式加载，让它感觉加载速度更快，特别重要的是图像加载后应用的背景位置。

Answer 1

将您的 CSS 修改为以下内容：

#X,#Y,#Z {background:url('spritesheet.jpg') !important;}

将解决您所有的问题。

或者，您也可以格式化您的代码，以便最后调用背景图片：

#X {width:600px;height:5px;background:#FF0000 0 -10px repeat-x}
#Y {width:10px;height:20px;background:#00FF00 -60px -20px}
#Z {width:20px;height:10px;background:#0000FF -110px -20px}
#X,#Y,#Z {background-image:url('spritesheet.jpg')}`

CSS 需要速度的背景缩短版本

CSS background shortened version for speed wanted

html

css

background-image

background-color

background-position