css实现图片全屏铺满自适应的三种方法

前两天做了一个登录页面，登录页面背景是一张图片。图片要铺满整个屏幕，当时再将整个图片铺满时，总是遇到各种问题：①.图片虽然铺满整个屏幕，但是图片变形了；②.图片没有变形，但是图片没有铺满整个屏幕。

background: url("bg.png") no-repeat;
height:100%;---> height:100vh;
width:100%;
overflow: hidden;
background-size:cover;//或者background-size:1

//样式讲解

background-size: cover;——把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；

min-height: 100vh;——视窗的高度，“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/ window.innerHeight大小。

00%;

 

 

以下有两种方法是在度娘找到，大家可以试试

①

body {
background-image: url(bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
} 

这里的背景颜色，图片，等可以使用简写

②

margin:0px;
background: url(images/bg.png) no-repeat;
background-size:100% 100%;
background-attachment:fixed;
url(images/beijing.png)——图片路径的位置；