Question

我想在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

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

根元素的背景成为画布的背景并覆盖整个画布，锚定（对于＆＃39;背景位置＆＃39;）在同一点上，如果它仅为画布绘制根元素本身。根元素不会再次绘制此背景。

因此，这将是 body

的特殊问题

在此代码段中，正文 -pseudo正常运行

＆＃13;

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);
}

＆＃13;

<main></main>

＆＃13;

Answer 2

您可以在视口测量值为100时对镜头应用最小宽度和最小高度。

请参阅下面的代码段

＆＃13;

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;
    }

＆＃13;

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

＆＃13;

背景大小：身体上的遮盖高于视口（即使身体高度为100％）

2 个答案: