Question

我创建了一个网页，但最近使用了背景渐变系统，使眼睛不那么刺眼。这让我突然意识到网页超出了<html>元素的点，并继续进一步滚动。这也会导致背景渐变在<body>元素下重复第二次。

有没有人知道为什么会发生这种情况的原因以及阻止页面滚动到<html>元素之外的任何方法，或者阻止背景在<html>之后重复第二次标记

以下是它发生的一个例子：

以下是背景的CSS：

body{
    background-repeat: no-repeat;
    background: rgba(18,87,182,0); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(86,213,251,1) 0%,rgba(18,87,182,0.5) 10%,rgba(255,0,0,0) 70%); /*Safari 5.1-6*/
    background: -o-linear-gradient(rgba(86,213,251,1) 0%,rgba(18,87,182,0.5) 10%,rgba(255,0,0,0) 70%); /*Opera 11.1-12*/
    background: -moz-linear-gradient(rgba(86,213,251,1) 0%,rgba(18,87,182,0.5) 10%,rgba(255,0,0,0) 70%); /*Fx 3.6-15*/
    background: linear-gradient(rgba(86,213,251,1) 0%,rgba(18,87,182,0.5) 20%,rgba(255,0,0,0) 70%); /*Standard*/
}

Answer 1

试试这个，将background-attachment: fixed;添加到您的身体

＆＃13;

body{
    background-repeat: no-repeat;
    background: rgba(18,87,182,0); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(86,213,251,1) 0%,rgba(18,87,182,0.5) 10%,rgba(255,0,0,0) 70%); /*Safari 5.1-6*/
    background: -o-linear-gradient(rgba(86,213,251,1) 0%,rgba(18,87,182,0.5) 10%,rgba(255,0,0,0) 70%); /*Opera 11.1-12*/
    background: -moz-linear-gradient(rgba(86,213,251,1) 0%,rgba(18,87,182,0.5) 10%,rgba(255,0,0,0) 70%); /*Fx 3.6-15*/
    background: linear-gradient(rgba(86,213,251,1) 0%,rgba(18,87,182,0.5) 20%,rgba(255,0,0,0) 70%); /*Standard*/
    background-attachment: fixed;
}

＆＃13;

<article>
    <section id="intro">
        <h1><strong>Welcome! </strong></h1>
        <br>
        <br>
        
        Writing goes here
        
        <strong> Please click <a>here</a> to begin helping with the alpha test.</strong>
    </section>
</article>

＆＃13;

网页扩展到HTML元素之外

1 个答案: