之前遇到设置背景图大小的例子要么设置
background-size:100%;
要么设置
background-size:cover;
一般来说这两个就可以解决背景图的大小问题，但是我遇到过一个功能，就是不管我背景图片有多大，它都得按照我屏幕的大小全屏显示，这时候100%与cover已经不能满足我的要求了，从一个朋友那我知道了css的两个属性：vw(viewwidth)和 vh(viewheight);这就是不管屏幕的大小如何变化，背景图都能全屏显示。
1.html部分
<body>
<div class="header"></div>
<body>
2.css
*{
margin:0;
padding: 0;
list-style: none;
}
body{
width:100%;
height:100vh;
position: relative;
background-image: url('./images/banner.jpg') ;
background-repeat: no-repeat;
background-size: 100vw 100vh;
}
.header{width:100%;height:100%;}
要把学到的知识重复练习，争取牢记于脑海之中。
网友评论