html - 防止背景重复

Question

这个问题已经有答案了:

Stretch and scale a CSS image in the background - with CSS only (22 个回答)

已关闭 7 年前。

如何防止背景重复？目前它重复了两次，但我需要背景填充整个页面而不重复(因为否则它看起来很奇怪!)。下面是我的代码，但如果需要，我可以提供站点链接。

HTML

<div class="container">
<img src="box.png" style="float: left;" />
<div class="navrow">
<ul>
<li class="navmenu" style="background: #6dc066;"><a href="index.php">Home</a></li>
<li class="navmenu" style="background: #a155e7;"><a href="about.php">About</a></li>
<li class="navmenu" onclick="shakeregister();" style="background: #ffa500;">Register</li>
<li class="navmenu" style="background: #3399ff;"><a href="play.php">Login</a></li>
<li class="navmenu" style="background: #ff6666; margin-right: 0px;"><a href="contact.php">Contact</a></li>
<div style="clear: left;"></div>
</ul>
</div>
<div style='clear:both'></div>
</div>

CSS

body {
 font-family: Titillium Web, sans-serif;
 background-image: url("images/polarvillebg.png");
}

h1, h2, h3 {
 font-weight: normal;
}

.container {
 width: 70%;
 margin: 0 auto;
 margin-top: 2%;
}

.navrow {
 float: right;
 text-align: center;
}

.navrow li {
 display: inline-block;
}

.navrow li a {
 color: #fff;
 text-decoration: none;
 width: 100%; 
 height: 100%;
 display: block;
}

.navmenu {
 height: 100px;
 width: 78px;
 color: #fff;
 margin-right: 4px;
 line-height: 100px;
 transition:height 0.5s; 
 -webkit-transition:height 0.5s; 
 box-shadow: rgb(204, 204, 204) 0px 0px 10px 0px;
 cursor: pointer;
}

.navmenu:hover {
 height: 107px;
}

Answer 1

CSS 规则:

background-size: cover;

将使背景图像足够大，以便它覆盖作为背景的元素。这也会产生不重复背景图像的副作用。

---

如果您之后仍然遇到背景重复问题，您可以使用:

background-repeat: no-repeat;

明确强制背景不重复。

---

因此，在您提供的代码中，完整的解决方案是将您的 body 规则更改为:

body {
 font-family: Titillium Web, sans-serif;
 background-image: url("images/polarvillebg.png");
 background-size: cover;
 background-repeat: no-repeat;
}