我正在更改我的网站以使用一个精灵图像而不是许多单独的图像。
所以我的精灵（1000 x 2000 像素）上的第一件事是背景图像，即 100 x 2000 像素。
仅对前 100px 执行重复 x 的 css 是什么样的？
谢谢
问问题
916 次
2 回答
1
实际上最好的解决方案是制作 3 个精灵。
main-sprite.png（所有图标和图像为 1000x2000）
x-sprite.png (1px 宽度) 将它用于所有 repeat-x 背景
y-sprite.png (1px 高度) 将它用于所有重复-y 背景
于 2013-03-14T03:20:36.597 回答
0
三个解决方案：
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-repeat，on 用于不重复）
于 2013-03-14T03:59:47.827 回答