Question

我刚开始学习HTML / CSS，对于如何使背景的线性渐变适合整个页面，我感到很困惑。我四处闲逛，似乎找不到适合我实际情况的线程。

我目前已对其进行了设置，以使渐变填充整个视口，并随浏览器窗口大小缩放。但是，我很想知道如何使渐变不随我在视口中滚动的位置而跟随我，而是使整个渐变充满页面（粘贴视口，而不是随视口锁定或在我滚动时随身跟随我）

。

例如，如果您一直向右滚动，您会看到渐变的“最右边”区域是什么，而不仅仅是我设置的整个渐变（也不是重复的渐变））。很抱歉，如果我不清楚。感谢您的时间。

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

所以代替这个：

document.addEventListener('click', (event) => {
  if (!event.target.matches('.google-button')) return 

   /* Put all you code here */
})

您应该拥有这个：

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

    body {
        background-image: linear-gradient(to bottom right, pink, white);
        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

您在这里面临的问题是oveflow。您的元素溢出主体，并且渐变的大小适合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>

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

3 个答案: