如何让背景渐变填充整个页面？

Question

我最近才开始学习 HTML/CSS，我很困惑如何使背景的线性渐变适合整个页面。我四处寻找，似乎找不到适合我具体情况的线索。

我目前已将其设置为使渐变填充整个视口并随浏览器 window 大小缩放。 但是，我很想知道如何让渐变在我滚动视口时不跟随我，而是让整个渐变填充页面（通过视口，不锁定视口或在我滚动时跟随我滚动）。

因此，例如，如果您一直向右滚动，您会看到渐变的 "rightmost" 区域，而不仅仅是我设置的整个渐变 (也不是重复渐变）。如果我不清楚，我很抱歉。感谢您的时间。

<head>
    <style>
        html {
            height: auto;
        }

        body {
            background-image: linear-gradient(to bottom right, pink, white);
            height: auto;
            background-attachment: fixed;
            background-size: cover;
        }

        div {
            display: inline-block;
            height: 100px;
            width: 100px;
        }

        .blue {
            background-color: blue;
        }

        .yellow {
            background-color: yellow;
        }

        .red {
            background-color: red;
        }

        .magenta {
            background-color: magenta;
        }

        .sand-brown {
            background-color: rgb(214, 176, 93);
            /*height: 5000px;*/
            width: 5000px;
        }

        .sand-brown2 {
            background-color: rgb(214, 176, 93);
            height: 5000px;
            /*width: 5000px;*/
        }
    </style>
</head>

<body>
    <div class="blue"></div>
    <div class="yellow"></div>
    <br>
    <div class="red"></div>
    <div class="magenta"></div>
    <br>
    <div class="sand-brown"></div>
    <div class="sand-brown2"></div>

</body>

</html>

Answer 1

您需要将渐变属性赋予html元素而不是body元素。

所以不是这个：

<head>
<style>
    html {
        height: auto;
    }

    body {
        background-image: linear-gradient(to bottom right, pink, white);
        height: auto;
        background-attachment: fixed;
        background-size: cover;
    }

你应该有这个：

<head>
<style>
    html {
        height: auto;
        background-image: linear-gradient(to bottom right, pink, white);
    }

    body {
        height: auto;
        background-attachment: fixed;
        background-size: cover;
    }

这就是你要找的吗？

Answer 2

您可以使用足以覆盖所有内容的 background-size 设置，例如 background-size: 5100px 5500px; 在您的情况下：

body {
  background-image: linear-gradient(to bottom right, pink, white);
  background-size: 5100px 5500px;
}

div {
  display: inline-block;
  height: 100px;
  width: 100px;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.magenta {
  background-color: magenta;
}

.sand-brown {
  background-color: rgb(214, 176, 93);
  /*height: 5000px;*/
  width: 5000px;
}

.sand-brown2 {
  background-color: rgb(214, 176, 93);
  height: 5000px;
  /*width: 5000px;*/
}

<div class="blue"></div>
<div class="yellow"></div>
<br>
<div class="red"></div>
<div class="magenta"></div>
<br>
<div class="sand-brown"></div>
<div class="sand-brown2"></div>

Answer 3

您在这里遇到的问题是溢出。您的元素溢出主体，渐变的大小适合 body 的大小，然后它会传播到根元素并重复。为避免这种情况，您可能需要添加另一个您制作的容器 inline-block.

.container {
  background-image: linear-gradient(to bottom right, pink, white);
  display: inline-block;
}

.container > div {
  display: inline-block;
  height: 100px;
  width: 100px;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.magenta {
  background-color: magenta;
}

div.sand-brown {
  background-color: rgb(214, 176, 93);
  /*height: 5000px;*/
  width: 5000px;
}

div.sand-brown2 {
  background-color: rgb(214, 176, 93);
  height: 5000px;
  /*width: 5000px;*/
}

<div class="container">
  <div class="blue"></div>
  <div class="yellow"></div>
  <br>
  <div class="red"></div>
  <div class="magenta"></div>
  <br>
  <div class="sand-brown"></div>
  <div class="sand-brown2"></div>
</div>

如何让背景渐变填充整个页面？

How to have background gradient fill entire page?

html

css

viewport

linear-gradients