Background-size：body 上的封面高于视口（即使 body 是 100% 高度）

Question

我想在 body 中使用背景图片。背景图像应覆盖视口（与屏幕的宽度和高度相同）。我有以下代码，但显示的背景图像比 viewport/screen 高：图像底部延伸到折叠下方。可能是 body.

上的背景图像未按 100% 高度裁剪

    html {
     height:100%;
        }
    
    body { 
      height:100%;
     background-image:url("http://lorempixel.com/400/200/");
     background-position: top left;
     background-size:cover;
     background-repeat:no-repeat;
     }
    
    main {
     max-width:80rem;
     height:1000px;
     background-color: rgba(0,0,200,0.5);
     }

<main></main>

Answer 1

您可以将 min-width 和 min-height 应用到 body in viewport measurements 100。

请参阅下面的代码段

body { 
    height:100%;
    min-width:100vw;
    min-height:100vh;
    background-image:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSnfXp5RSFk2ZfOmIl7EMvUHEW0bzWBowc6NtDFkG3M7r2Xljl2");
    background-position: top left;
    background-size: cover;
    background-repeat:no-repeat;
    margin:auto;
    }

<body>
<main>  
</main> 
</body

Answer 2

我认为这种行为的原因是规范的这一部分：

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

所以这将是 body

的一个特殊问题

在此代码段中，body-pseudo 工作正常

html,
body {
  height: 100%;
}

body::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("http://lorempixel.com/400/600/");
  background-position: top left;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

main {
  max-width: 80rem;
  height: 1000px;
  background-color: rgba(0, 0, 200, 0.5);
}

<main></main>

Background-size：body 上的封面高于视口（即使 body 是 100% 高度）

Background-size: cover on body is higher than viewport (even though body is 100% height)

css

background-image