博客

html 怎么让背景图铺满整个页面

  • Post author:
  • Post category:其他


在这里插入图片描述

当遇到上图类似情况的时候，为了让背景图片铺满整个页面，我们可以这样设置： 

<style> 
 body {
   background:url("zz.jpeg")  no-repeat center center;   /*加载背景图*/   /* 背景图不平铺 */
   background-size:cover;  /* 让背景图基于容器大小伸缩 */
   background-attachment:fixed;        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */    //此条属性必须设置否则可能无效/
   background-color:#CCCCCC;   /* 设置背景颜色，背景图加载过程中会显示背景色 */
 }
</style>
 <html>
 <body>
 </body>
 <html>

效果：

在这里插入图片描述


版权声明：本文为youaremyscared原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。