.box{
height: 300px;
width: 300px;
background:url('../imgs/108.png') no-repeat center 0px;
background-position: center 0px;
background-size: cover;
text-indent: -999px;
}
说明:
url(‘图片路径’)——图片路径的位置;
no-repeat—— 图片不重复;
repeat-x是横向铺满,就是在.box
中,图片108.png
会横向重复,直到铺满。
repeat-y是纵向,就是在.box
中,图片108.png
会竖向重复,直到铺满。
center 0px——center是距离页面左边的定位,0px是距离页面上面的定位;
background-position: center 0px——就是图片的定位,同上;
background-size: cover:——把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中;
min-height: 100vh:——视窗的高度,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/ window.innerHeight大小。
原文链接:https://blog.csdn.net/qq_42539194/article/details/108180760