HTML模糊背景图出现白边 如何拉伸适配全尺寸屏幕？

问题原因 #

• 浏览器默认样式自带边距：body元素默认存在约8px的外边距，未重置的情况下，伪元素的100vw/100vh是基于body的内容区域计算，会漏出下层白色背景。
• 模糊滤镜的边缘特性：blur()滤镜会让元素边缘产生半透明扩散效果，直接铺满视口的情况下，半透明边缘会透出下方白色背景，形成可见白边。
• 固定定位未指定起始坐标：position: fixed未指定top和left属性时，元素默认对齐文档流起始位置，叠加body的默认边距就会出现左侧、顶部的白边。

解决方案 #

你只需要对现有代码做3处修改即可解决问题：

1. 重置html和body的默认边距，避免默认边距占位
2. 给伪元素添加top: 0和left: 0，明确固定定位的起始位置为视口左上角
3. 给伪元素添加transform: scale(1.1)，轻微放大元素让模糊的边缘区域落在视口之外，避免透出白边

修改后的完整代码如下：

<html>

<head>
  <title>Fit image on screen</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link href='https://fonts.google.com/specimen/Henny+Penny?query=nf' rel='stylesheet' />
  <style>
    /* 新增：重置默认边距 */
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden; /* 可选，防止放大后的伪元素触发滚动条 */
    }
    body:before {
      background-image: url('pexels-pixabay-270360.jpg');
      content: '';
      position: fixed;
      /* 新增：指定定位起始点 */
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      -webkit-filter: blur(1px);
      -moz-filter: blur(1px);
      -o-filter: blur(1px);
      -ms-filter: blur(1px);
      filter: blur(1px);
      z-index: -9;
      /* 新增：轻微放大隐藏模糊边缘 */
      transform: scale(1.1);
    }
  </style>
</head>

<body>
</body>

</html>

内容的提问来源于stack exchange，提问作者Andre_van_stone