Question

我正在更改我的网站以使用一个精灵图像而不是许多单独的图像。

所以我的精灵（1000 x 2000 px）上的第一件事就是背景图片，即100 x 2000像素。

css看起来只对前100px做一次repeat-x？

感谢

Answer 1

实际上最好的解决方案是制作3个精灵。

main-sprite.png（所有图标和图片均为1000x2000）

x-sprite.png（1px宽度）将其用于所有repeat-x背景

y-sprite.png（1px height）将它用于所有repeat-y背景

Answer 2

三种解决方案：

1-改变你的精灵图像的轮廓，而不是使用1000x2000使用100xwhatever你想要的精灵图像并将其他图标和图像堆叠在底部

<html>
<head>
<style>
body {background:url('yourspriteimage.png'); background-repeat:repeat-x; width:100px;height:2000px;background-position:0px 0px;}
</style>
</head>
<body>
your content here
</body>
</html>

2-不要对您的背景图像进行精灵处理。

3-创建三个精灵图像（一个仅用于x-repeat，一个用于y重复，一个用于无重复）

身体背景使用精灵

2 个答案: