Question

我将如何解决此问题。如果你用我在网站上显示的文字堵塞我的代码的主要部分，那么你最终会得到一个滚动条。一旦你向下滚动顶部横幅重复自己。如果再次使用更多文本再次执行此操作，则会重复多次。

到目前为止，这是我的代码。

<!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;
}

在localhost上自己尝试，而不是在线代码测试人员。感谢

Answer 1

这不是故障

这是预期的行为。 The default for background-repeat是repeat，所以这......

html, body {
  background-image: linear-gradient(180deg, #7D7D7D, #7D7D7D 50px, transparent 57px,     transparent 140%);
}

...除非你说明......否则会重复...

html, body {
  background-repeat: no-repeat;
}

......每次到达图像尺寸的末尾。

用重复背景（CSS）修复网站上的烦人故障

1 个答案:

这不是故障