时间戳

首页 > 解决方案 > 你如何使用背景：自动；正确吗？

html - 你如何使用背景：自动；正确吗？

问题描述

我试图让背景填满整个页面。我想出如何做到这一点的唯一方法是设置高度和宽度<div id="All">并将该 div 放在其他所有内容周围。我知道如果我改变浏览器的大小，它不会自动调整大小，所以如果我让我的浏览器变小或变大看起来会很奇怪。

如果我在#All 上将高度和宽度设置为自动，则它不会填满整个网页。请告知我做错了什么。另外，如果我做自动，粘性#Move 不会停留在页面顶部。

这段代码只是我学到的东西，所以不是一个实际的项目，但我想学习如何为未来的项目做这件事。

#Move {
  position: sticky;
  top: 0;
  color: red;
}

h1 {
  color: red;
}

.Hello {
  font-size: 36px;
}

.Hello2 {
  font-size: 15px;
}

p {
  color: white;
}

.DivClass {
  width: 160px;
  height: 220px;
  padding: 40px;
  border: 10px solid black;
  border-radius: 60px;
  margin: 50px;
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqOq9_iT948LTPmS5FuCMlaqlvn2KJQ-0d7Xw5kLMfWz69wwRA&usqp=CAU");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 80%;
}

.image-whitecat {
  width: 500px;
  heigth: 500px;
  background-color: red;
  margin: 50px 50px 90px 250px;
  transform: rotate(10deg);
}

.image-cat {
  width: 700px;
  height: 500px;
  border-radius: 300px;
  margin-left: 350px;
  filter: opacity(70%)
}

.Purple {
  color: purple;
}

.PurpleText {
  background: teal;
  text-align: center;
  padding-top: 50px;
  width: 150px;
  height: 100px;
  border: 5px solid red;
  border-radius: 100px;
  margin: 10px 0 0 1000px;
}

#All {
  background-color: lavender;
  position: absolute;
  top: 10px;
  bottom: 10px;
  height: 1850px;
  width: 1810px;
}
<div id="All">
  <div class="DivClass">
    <h1>HELLO!!!</h1>
    <p class="Hello">Hello</p>
    <p class="Hello2">Hello 2</p>
    <p>Yes</p>
  </div>
  <p id="Move">I will stay at the top of the page!</p>
  <div>
    <img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-551554__340.jpg" class="image-whitecat" />
  </div>
  <div>
    <img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__340.png" class="image-cat" />
  </div>
  <div class="PurpleText">
    <p class="Purple">Purple</p>
  </div>
</div>

标签： htmlcssbackground

解决方案

我认为你需要给你的html和body标签一个css高度......

html, body {
  height: 100%;
  margin: 0;
}

所以， https://jsfiddle.net/z51crou7/

推荐阅读