我创建了一个网页，但最近使用了背景渐变系统以减少对眼睛的刺眼感。这让我突然意识到该网页超出了 <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*/
}
最佳答案
试试这个，添加 background-attachment: fixed; 到你的 body ，
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;
}<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>关于html - 网页超出了 HTML 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45752126/