问题及应用背景:
1、【问题】:background-repeat: repeat-y在pc端查看背景是纵向平铺拉伸的,在移动端背景不展示
2、【背景】:对于非固定高度的页面,需要添加背景,此时背景需要是可以自动拉伸的,因此需要使用background-repeat: repeat-y实现纵向平铺
原因
经过多方面排查,有以下两个原因
1、background-size 有两个值,若只设置一个,会导致背景不展示(代码如下)
backgruond-image: url('@/xxx/xxx.png');
backgroung-size: 100%;
background-repeat: repeat-y;
2、border-radius 高度自适应的div若设置了border-radius,再设置背景,此时背景是不生效的(代码如下)
backgruond-image: url('@/xxx/xxx.png');
backgroung-size: 100% 100%;
background-repeat: repeat-y;
border-radius: 0 0 10px 10px;
如有问题,欢迎评论