原图效果:
可以看到图片宽度和高度不够,就会出现这样的1个整的,3个残缺的。
我们要实现 1张图片铺满全屏的效果。
代码如下:
body{
background: url("image.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;
或者background-size:100%;
}
特殊情况下
用100% 不会出现效果
那么,就换cover 试一下
实际情况的代码
#nav_map {
width: 100%;
flex: 1;
background: #ccc;
z-index: 100px;
background-image: url("./assets/oneimg/bg.jpg") ;
background-size:cover;
}
这样就能完美解决问题
我这里是上面div 固定 下侧div 铺满,可能会对背景图片产生影响。
这样就解决了问题了。
撒花~~~