css中background:url背景图片如何铺满并正常显示

.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