CSS背景图片有问题

Question

我正在尝试使用照片作为封面。 由于某种原因，我似乎无法使它正常工作。 我的图像只是拒绝覆盖页面。

 #cover { background-image: url("https://i.stack.imgur.com/QE9pP.jpg"); background-size: cover; background-size: center center; background-repeat: no-repeat; background-attachment: fixed; background-color: #464646; } .cover-content { color: hsla(182, 100%, 28%, 1); font-family: font-family: 'Gravitas One', cursive; font-size: 400%; text-align: center; } 

 <div id="cover"> <div class="cover-content"> <h1>Snowfall Design Studio</h1> </div> </div> 

Answer 1

您的页面未涵盖整个视口。 如果要使图像覆盖整个屏幕，请将背景图像放在html或body元素上

 html { height: 100%; } body { min-height: 100%; background-image: url("https://i.stack.imgur.com/QE9pP.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-color: #464646; } .cover-content { color: hsla(182, 100%, 28%, 1); font-family: font-family: 'Gravitas One', cursive; font-size: 400%; text-align: center; } 

 <div id="cover"> <div class="cover-content"> <h1>Snowfall Design Studio</h1> </div> </div> 

Answer 2

这是覆盖整个页面的图像示例： https : //codepen.io/anon/pen/owJVgq

您需要将背景图像移至body标签并添加以下视口：

<meta name="viewport" content="width=device-width, initial-scale=1">

---

如果您希望本部分只是一个部分，并且在图片下方有更多内容，则是您在寻找的内容： https : //codepen.io/anon/pen/BZvbNe

同样，您需要添加视口，还需要添加：

body {
  margin: 0px;
  padding: 0px;
}