更新：-04-19

前端-CSS

文章目录

最好的使用代码解释：1、 backgorund 设置背景2、backgorund-zise

background-size图片自适应

background-size ：[ | | auto ]{1,2} | cover | contain ；

cover：用于等比放大背景图；contain：用于等比缩小背景图（背景图需要大于被放的块，否则背景图任然会被放大）；auto：默认值；

最好的使用代码

注意地址，我这在vue.config.js 配置了 @ = src 文件路径

background: url("~@/assets/bg_wjy/conference_pop.png") no-repeat center center;background-size: 100% 100%;

解释：

1、 backgorund 设置背景

no-repeat：图片不平铺（图片不够大的时候，不会重复多张图片）

center：第1个，上下居中；第2个，水平居中；

2、backgorund-zise

100% 100%：水平垂直方向100%拉伸

如果觉得《CSS如何实现背景图片（background-image）平铺 只有一张图？》对你有帮助，请点赞、收藏，并留下你的观点哦！