CSS精灵和渐变

Question

是否可以在单个精灵主图像上放置多个重复渐变？我有大约5个1px X 400 px渐变可以组合以减少页面请求。这几乎是我减少对象请求的最后一个地方。我在搜索时没有看到任何相关的技巧。我自己的实验没有取得好成绩。

Answer 1

假设您应用背景渐变的所有区域都小于400px高，您可以垂直平铺五个精灵，为您提供单个1x4000像素图像。

您可以通过指定垂直偏移并设置background-repeat:repeat-x来应用精灵的适当部分。

第一个的垂直偏移量为400 * (index of the sprite you want)：0px，第二个为400px，第三个为800px，等等。