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元素

上

＆＃13;

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

＆＃13;

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

＆＃13;

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

有CSS背景图像的麻烦

2 个答案: