Fatal编程技术网
  • html/
  • Html 如何让背景渐变填充整个页面？

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

html css

Html 如何让背景渐变填充整个页面？,html,css,viewport,linear-gradients,Html,Css,Viewport,Linear Gradients,我最近刚刚开始学习HTML/CSS，对于如何使背景的线性渐变适合整个页面，我感到非常困惑。我四处摸索，似乎找不到一条适合我具体情况的线索 <head> <style> html { height: auto; } body { background-image: linear-gradient(to bottom right, pink, white);

我最近刚刚开始学习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>
我目前设置了渐变，以便渐变填充整个视口，并随浏览器窗口大小缩放但是，我很想知道如何使渐变不会随视口滚动到任何地方，而是让整个渐变填充整个页面（通过视口，不会随视口锁定，也不会随视口滚动到任何地方）。

<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>
例如，如果你一直向右滚动，你会看到渐变的“最右边”区域是什么，而不仅仅是我设置的整个渐变（也不是重复的渐变）。如果我不清楚，我很抱歉。谢谢你抽出时间。 

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


html{
高度：自动；
}
身体{
背景图像：线性渐变（至右下角，粉红色，白色）；
高度：自动；
背景附件：固定；
背景尺寸：封面；
}
div{
显示：内联块；
高度：100px；
宽度：100px；
}
蓝先生{
背景颜色：蓝色；
}
黄先生{
背景颜色：黄色；
}
瑞德先生{
背景色：红色；
}
洋红先生{
背景色：洋红色；
}
.沙褐色{
背景色：rgb（21417693）；
/*高度：5000px*/
宽度：5000px；
}
.沙棕2{
背景色：rgb（21417693）；
高度：5000px；
/*宽度：5000px*/
}
您需要将gradient属性赋予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;
        }

        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>
因此，与此相反：

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

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

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


html{
高度：自动；
}
身体{
背景图像：线性渐变（至右下角，粉红色，白色）；
高度：自动；
背景附件：固定；
背景尺寸：封面；
}
你应该有这个：

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

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

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


html{
高度：自动；
背景图像：线性渐变（至右下角，粉红色，白色）；
}
身体{
高度：自动；
背景附件：固定；
背景尺寸：封面；
}
这就是您要寻找的吗？

您需要为html元素而不是body元素提供gradient属性

<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>
因此，与此相反：

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

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

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


html{
高度：自动；
}
身体{
背景图像：线性渐变（至右下角，粉红色，白色）；
高度：自动；
背景附件：固定；
背景尺寸：封面；
}
你应该有这个：

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

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

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


html{
高度：自动；
背景图像：线性渐变（至右下角，粉红色，白色）；
}
身体{
高度：自动；
背景附件：固定；
背景尺寸：封面；
}
这就是您想要的吗？

您可以使用足够大的
背景大小设置，以覆盖所有内容，例如
背景大小：5100px 5500px在您的情况下：


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




正文{
背景图像：线性渐变（至右下角，粉红色，白色）；
背景尺寸：5100px 5500px；
}
div{
显示：内联块；
高度：100px；
宽度：100px；
}
蓝先生{
背景颜色：蓝色；
}
黄先生{
背景颜色：黄色；
}
瑞德先生{
背景色：红色；
}
洋红先生{
背景色：洋红色；
}
.沙褐色{
背景色：rgb（21417693）；
/*高度：5000px*/
宽度：5000px；
}
.沙棕2{
背景色：rgb（21417693）；
高度：5000px；
/*宽度：5000px*/
}








您可以使用足够大的
背景大小设置来覆盖所有内容，例如
背景大小：5100px 5500px在您的情况下：


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




正文{
背景图像：线性渐变（至右下角，粉红色，白色）；
背景尺寸：5100px 5500px；
}
div{
显示：内联块；
高度：100px；
宽度：100px；
}
蓝先生{
背景颜色：蓝色；
}
黄先生{
背景颜色：黄色；
}
瑞德先生{
背景色：红色；
}
洋红先生{
背景色：洋红色；
}
.沙褐色{
背景色：rgb（21417693）；
/*高度：5000px*/
宽度：5000px；
}
.沙棕2{
背景色：rgb（21417693）；
高度：5000px；
/*宽度：5000px*/
}








您在这里面临的问题是流量。元素溢出了主体，渐变的大小与主体的大小相匹配，然后它被传播到根元素并重复。为了避免这种情况，您可能需要添加另一个您制作的
内联块
容器


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




.container{
背景图像：线性渐变（至右下角，粉红色，白色）；
显示：内联块；
}
.container>div{
显示：内联块；
高度：100px；
宽度：100px；
}
蓝先生{
背景颜色：蓝色；
}
黄先生{
背景颜色：黄色；
}
瑞德先生{
背景色：红色；
}
洋红先生{
背景色：洋红色；
}
沙褐色分区{
背景色：rgb（21417693）；
/*高度：5000px*/
宽度：5000px；
}
沙棕分区2{
背景色：rgb（21417693）；
高度：5000px；
/*宽度：5000px*/
}








您在这里面临的问题是流量。元素溢出了主体，渐变的大小与主体的大小相匹配，然后它被传播到根元素并重复。为了避免这种情况，您可能需要添加另一个您制作的
内联块
容器


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




.container{
背景图片：李