css平铺图片 不随缩放改变大小

CSS中可以使用background-image属性来设置图片作为背景，可以通过设置background-repeat属性来让图片平铺显示。常见的取值有：

background-repeat: repeat;
     /* 默认值，横向和纵向都平铺 */ background-repeat: repeat-x;
     /* 只横向平铺 */ background-repeat: repeat-y;
     /* 只纵向平铺 */ background-repeat: no-repeat;
     /* 不进行平铺 */ 

但是有时候我们需要让背景图片不随着容器的缩放而改变大小，可以使用background-size属性来设置背景图片的大小。常见的取值有：

background-size: auto;
     /* 默认值，根据背景图片的实际大小进行缩放 */ background-size: cover;
     /* 等比例缩放，使背景图片完全覆盖容器 */ background-size: contain;
     /* 等比例缩放，使背景图片宽高都不大于容器 */ background-size: 数字 数字;
 /* 分别设置横向和纵向的背景图片大小 */ 

具体的使用方法可以参考以下代码：

.demo {
       width: 500px;
       height: 300px;
       background-image: url('image.jpg');
       background-repeat: no-repeat;
       background-size: cover;
}
    

在上述代码中，.demo类设置了容器的大小为500px*300px，使用了背景图片image.jpg作为背景，不进行平铺，同时使用了cover值来让背景图片等比例缩放，覆盖整个容器。这样无论我们如何缩放页面，背景图片都会保持相对不变的大小。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！