CSS里面背景图像使用background-position定位显示的时候怎么才能让背景平铺？

Posted 2023-03-13

页面背景都做在一个PNG图片里面，有的背景因为是可以通过平铺来实现，所以就把背景切成了长条放在PNG图像里，用background-image:调用，并用background-position定位，请问怎样才能实现长条的平铺呢？？

用background-size属性，
格式如下：background-size: length|percentage|cover|contain;
length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 参考技术A body 
        background:    repeat top left;
        

body 是选择了整个网站，然后给他添加图片背景

repeat是让图片重复

top与left是让图片定位，意思是整个网站的 顶部并且是左边

然后图片按顺序，先出现在网站的左上角，然后往右重复，沾满最上面整个屏幕，然后再出现在左上角图片的下面，然后就这样一直重复，沾满整个屏幕

参考技术B

如果是要平铺的图片只能做成单张的图片，集合图片（css sprite）是不行的。

至于实现平铺效果用：

background-repeat:repeat;
background-repeat:repeat-y;
background-repeat:repeat-x;

追答

谢谢

有问题继续交流

本回答被提问者和网友采纳 参考技术C background-position: 12px 12px;

就是类似的2个像素，你可以在浏览器里面F12调整，可以达到最终效果。我做html5游戏的时候，就利用了这个。

参考技术D background-size: 20% 100%;
background-repeat:repeat;//默认的
调用图片默认是平铺的，你如果想要只铺一行用background-size: n% 100%;
background-position用不到吧