.pages {
width: 100%;
height: 100%;
background: url('@/static/image/index/bgi.png') no-repeat center center fixed ;
background-size: cover;
box-sizing: border-box;
}
参数1:图片路径
参数2:是否平铺
repeat:默认代表水平和垂直都平铺
no-repeat:代表不平铺
repeat-x:水平平铺
repeat-y:垂直平铺
参数3:图片位置 默认在0 0 或者说实在 left top
第一个值:水平位置 给具体的px值代表距离左边多少
第二个值:垂直位置 给具体的px值代表距离上边多少
还可以给百分比,代表图片的百分比要重叠在盒子的百分比那个位置上
给方向:
水平方向:left center right
垂直方向:top center bottom
参数4:图片大小 默认是图片大小
必须在参数3后面加一个
可以给具体的像素大小,还可以给百分比
还可以两个专业词语:
cover:有一部分没显示,覆盖的意思,代表图片一定要覆盖盒子,缩放后图片一定会只要一边缩放到了盒子内就停止缩放
contain:没变形,完全显示了,包含的意思,代表图片一定要被盒子包含,缩放后图要两边都缩放到盒子内才停止缩放
他们都是按比例缩放,不会变形
参数5:背景颜色
