如何解决此问题。如果你在我代码的主要部分插入了大量出现在网站上的文本，最终得到了一个滚动条。向下滚动后，顶部的横幅会重复出现。如果你用更多的文本再做一次，同样的事情会重复多次。
这是我迄今为止的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>MC serverlist</title>
</head>
<body id="servers">
<div id="maincontainer">
<ul id="navlist">
<li><a href="index.php" id="servers_nav">SERVERS</a></li>
<li><a href="skins.php" id="skins_nav">SKINS</a></li>
<li><a href="resource-packs.php" id="resource-packs_nav">RESOURCE PACKS</a></li>
<li><a href="builds.php" id="builds_nav">BUILDS</a></li>
<li><a href="mods.php" id="mods_nav">MODS</a></li>
<li><a href="forum.php" id="forum_nav">FORUM</a></li>
</ul>
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
</div>
</body>
</html>
CSS代码
html, body {
height: 100%;
margin: 0;
background: #A3A3A3;
background-image: linear-gradient(180deg, #7D7D7D, #7D7D7D 50px, transparent 57px, transparent 140%);
}
#maincontainer {
min-height: 100%;
width: 960px;
min-width: 600px;
margin: auto;
border: ridge;
border-color: #919191;
border-top: 0;
border-bottom: 0;
background: rgba(255,255,255,0.35);
padding-left: 16px;
padding-right: 16px;
}
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
padding-top: 6px;
}
ul li {
float:left;
margin-right: 12px;
border: groove;
border-width: 2px;
border-color: #969696;
}
ul li a {
display:block;
padding-left: 5px;
padding-right: 5px;
height: 38px;
background-color:#7D7D7D;
text-align: center;
text-decoration: none;
line-height: 37px;
color: #EDEDED;
font-weight: bold;
font-family: impact;
font-size: 1.8em;
}
ul li:hover {
float:left;
margin-right: 12px;
border: ridge;
border-width: 2px;
border-color: #969696;
}
ul li a:hover {
color: white;
}
ul li a:active {
background-color: black;
}
在本地主机上自己尝试，而不是在在线代码测试人员中。感谢
这不是故障
这是意料之中的行为。background-repeat的默认值为repeat，因此。。。
html, body {
background-image: linear-gradient(180deg, #7D7D7D, #7D7D7D 50px, transparent 57px, transparent 140%);
}
将重复，除非您声明。。。
html, body {
background-repeat: no-repeat;
}
每当它达到图像大小的末尾时。