background的图片是不是平铺填满表格

Posted 2023-03-24

比如说，我的表格是800像素的，但是我的背景图片是200像素，这样的话背景是不是显示4张图片？还是把图片拉伸了只显示一张图片？

参考技术A 对于这个问题，如果拉伸的话，就会出像素问题，也就是图片不好看，建议把4个200像素的图片，合成一张800像素的图片，做为background(背景），就可以了，不需要拉伸图片呵！ 参考技术B background:url(00.jpg) no-repeat;只显示一次，不平铺
background:url(00.jpg) repeat-x;横向平铺
background:url(00.jpg) repeat-y;纵向平铺
除此之外，你就要改图片的大小，来符合表格的尺寸...本回答被提问者采纳

background设置不平铺后图片消失

参考技术A 如果背景图片不平铺就达不到全屏的效果，如果平铺了之后效果就有些差强人意，这时候CSS这个属性就派上用场了。
background-size: cover; //把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

这个属性有四个值：
length 设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 参考技术B 因为页面有多个动画效果，导致body背景图在苹果手机上，大概率加载不出来，或者只加载中间一部分。
定位出来问题的原因，是动画效果（infinite）影响了背景图的渲染。

当时的解决办法：让所有动画延迟