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

问题描述：

我想在我的body中使用背景图像。背景图像应该覆盖视口（与屏幕宽度和高度相同）。我有以下代码，但背景图像比视口/屏幕显示得更高：图像底部向下延伸。这可能是因为背景图像没有被身体100％的高度裁剪。背景大小：身体覆盖高于视口（即使身体高度为100％）

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

<main></main>

@vals注意到你删除答案，你知道它为什么会这样吗？ – LGSon

我相信有一个特殊情况与身体背景，我认为有一个关于这个问题的地方，但我一直没有找到它 – vals

答

我认为，这种现象的原因是规格的这一部分：

根元素的背景变得画布的背景，并覆盖整个画布，锚定（关于“背景位置”）在如果仅为根元素本身绘制的话，它将会是相同的点。根元素不会再次绘制该背景。

因此，这将是一个特别的问题与体

在这个片段中，一个体 - 伪正常工作

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>

我删除了我的信息并更新了你的信息，再加上1 ...希望你不介意:) – LGSon

@LGSon当然我不介意:-)但是你的回答是可以的，我不想发布我的信息作为替代方案，只是想明确这个问题是围绕* body *的一个特例。无论如何，这样很好。 ...并感谢:-) – vals

答

可以应用一个最小宽度和最小高度，以在主体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

看看代码段

这并不能阻止它被裁剪当高度低于图像的比率高度....这有道理吗？ – LGSon

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

相关推荐