背景图铺满全屏

桃扇骨 2021-11-17 11:22 446阅读 0赞 
  1. <!DOCTYPE html>
  2.       <html>
  3.       <head>
  4.       <meta charset="utf-8">
  5.       <title>cover Screen</title> 
  6.       <style>
  7.         body{
  8.           margin:0px;
  9.         }
  10.         .height-100 {
  11.             position: absolute;
  12.             height: 100%; width: 100%;
  13.             background-image: url('1.jpg');
  14.             background-repeat: no-repeat;
  15.             background-size: 100% 100%;
  16.         }
  17.       </style>
  18.       </head>
  19.       <body>
  20.       <div id="height-100" class="height-100"></div>
  21.       </body>
  22.       </html>

background-size：100%和background-size：cover的区别？
background-size：100%—按容器比例撑满，图片变形；
background-size：cover—把背景图片放大到适合元素容器的尺寸，图片比例不变。

上面的不能改为background-size：cover只能看见图片的一部分

亲测实用！！！

发表评论

表情：
评论列表 （有 0 条评论，446人围观）

还没有评论，来说两句吧...

相关阅读