防止背景重复[重复]

Posted 2023-03-06

【中文标题】防止背景重复[重复]

【英文标题】：Prevent Background Repeating [duplicate]

【发布时间】：2016-03-20 07:57:56

【问题描述】：

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

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;

【问题讨论】：

您好，在您获得帮助后，请不要破坏您的帖子。这就像在树下避难后砍倒一棵树。请允许其他未来的用户从知识中获益。回答者会付出很多努力。不要浪费他们宝贵的时间。

【参考方案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;

【讨论】：

太棒了，谢谢 - 正是我所需要的！

是否必须使用后台重复：无重复；还是只使用 background-size: cover; 就可以了吗？

@Mr.PV 只需background-size: cover; 应该没问题。

太棒了 - 时间限制一到，我会将您的回复标记为答案，谢谢 :)

【参考方案2】：

只需使用background-size:cover;:

background-size:cover;

或者，仅在 background 属性中：

background: url("images/polarvillebg.png") scroll no-repeat center/cover;

JSFiddle Demo

【讨论】：

我无法使用此解决方案 - 它阻止了背景显示。

@Mr.PV 怎么没用？查看演示

您在编辑回复之前的解决方案不起作用（背景属性中的那个）-您的背景大小：封面；解决方案运行良好。

@Mr.PV JSFiddle 使用第一个答案中的那个

这是它的 css:background: url("http://lorempizza.com/1000/1000") scroll no-repeat center/cover;

【参考方案3】：

您可以使用此代码将图像设置为全屏背景。

html  
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

它会阻止重复，但CSS中也存在：background-repeat。

【参考方案4】：

只是说：

body
   background-repeat: no-repeat;
   background-size: cover;

"no-repeat" 告诉背景图像停止重复。 "cover" 告诉图像在整个视口上拉伸（不失真）。