css怎么让一张图片适应任何屏幕大小的电脑平铺?

Posted 2023-03-28

1、横向铺满，纵向留有空隙或超出屏幕：
body background:url(图片路径) no-repeat center; background-size:100% auto;
2、纵向铺满，横向留有空隙或超出屏幕：
body background:url(图片路径) no-repeat center; background-size:auto 100%;

补充说明：background-size属于css3，只有支持css3的浏览器才有效。 参考技术A background-size:100% 100%;
css3.0属性，低版本IE9以下不支持 参考技术B 如果是纯色的背景可以按照楼上的方法，如果是有图案的背景不建议这么做，会造成图片变形 参考技术C 单张图片“铺满屏幕”与“不失真”之间是矛盾的，铺满屏幕就必然会使图片的长宽比例发生变化造成失真，除非图片的长宽比例刚好与屏幕的长宽比例完全一致。
下面是铺满屏幕但不保证是否失真的css代码：
body background:url(图片路径) no-repeat; background-size:100% 100%;
下面是图片不失真但不保证是否完全铺满（留有空隙或者超出屏幕）的css代码：
1、横向铺满，纵向留有空隙或超出屏幕：
body background:url(图片路径) no-repeat center; background-size:100% auto;
2、纵向铺满，横向留有空隙或超出屏幕：
body background:url(图片路径) no-repeat center; background-size:auto 100%;
补充说明：background-size属于css3，只有支持css3的浏览器才有效。 参考技术D 得看你的图片是否规则：
1、规则：只保留图片规则的那部分，然后使用背景重复即可，背景设置为body的背景，那么不管什么样的分辨率下，你的网页背景都是铺满整个屏幕的。
2、不规则：这个就只能把图片做的足够大，并且控制背景居中显示了。