HTML让背景图片铺满整个图片

最新推荐文章于 2024-07-07 02:13:58 发布

冰橙雪梨

最新推荐文章于 2024-07-07 02:13:58 发布

阅读量2w

点赞数 15

文章标签： html5

本文链接：https://blog.csdn.net/hjc000712/article/details/124408024

版权

有时候我们加入背景图片时，会由于图片的大小不一致，导致图片进行平铺，以下代码可以解决这个问题

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