防止背景重复 [英] Prevent Background Repeating
问题描述
如何防止背景重复?目前,它重复了两次,但是我需要背景来填满整个页面而不重复(因为否则看起来很奇怪!).下面是我的代码,但是如果需要,我可以提供一个网站链接.
How do I prevent a background from repeating? Currently it's repeated twice, but I need the background to fill the whole page without repeating (because otherwise it looks strange!). Below is my code, but I can provide a site link if needed.
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;
}
推荐答案
CSS规则:
background-size: cover;
将使背景图像足够大,以使其覆盖背景元素.这还会产生不重复背景图像的副作用.
will make the background image large enough so that it covers the element that it's a background to. This will also have the side effect of not repeating the background image.
如果在此之后仍然无法进行背景重复,则可以使用:
If you're still having trouble with background repeating after that, you can use:
background-repeat: no-repeat;
明确要求背景不重复.
总而言之,在您提供的代码中,完整的解决方案是将您的 body
规则更改为此:
So all together, in the code you provided, the full solution would be to change your body
rule to this:
body {
font-family: Titillium Web, sans-serif;
background-image: url("images/polarvillebg.png");
background-size: cover;
background-repeat: no-repeat;
}
这篇关于防止背景重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!