CSS如何实现背景图片(background-image)平铺,只有一张图?
·
更新:2022-04-19
前端-CSS
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%拉伸
更多推荐
已为社区贡献3条内容
所有评论(0)