Html 即使使用“background-repeat: no-repeat”，背景图像也会重复
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8678370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background image repeating even with 'background-repeat: no-repeat'
提问by Sagotharan
I can't stop the image repetition in my tdelements. It looks very ugly. How do I solve this? I've added background-repeat: no-repeatcode also, but it's still not working. Please don't suggest removing the %from the width of my td.
我无法停止td元素中的图像重复。它看起来非常难看。我该如何解决这个问题？我也添加了background-repeat: no-repeat代码，但它仍然无法正常工作。请不要建议%从我的td.
<table bgcolor="#d0e9ff" width= "100%">
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center" border="0"><font face="arial, verdana, san-serif" size="2" ><a href="index.html " style="text-decoration:none">
<font color="#ffffff"><b>Home</a></font></div>
</td>
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="aboutus.html" style="text-decoration:none">
<font color="#ffffff"><b>About Us</a></font></div>
</td>
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="T&C.html" style="text-decoration:none">
<font color="#ffffff"><b>Training and Certifications</a></font></div>
</td>
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="services.html" style="text-decoration:none">
<font color="#ffffff"><b>Services</a></font></div>
</td>
<td width="9%" height="40" background="images/button.jpg" background-repeat: no-repeat>
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="Contactus.html" style="text-decoration:none">
<font color="#ffffff"><b>Contact Us</a></font></div>
</td>
</table>
回答by Jon Newmuis
You must set the background-repeatproperty within a styleattribute:
您必须在background-repeat属性中设置style属性：
<td width="9%" height="40" background="images/button.jpg" style="background-repeat: no-repeat">
<div align="center"><font face="arial, verdana, san-serif" size="2"><a href="aboutus.html" style="text-decoration:none">
<font color="#ffffff"><b>About Us</a></font></div>
</td>
回答by ThinkingStiff
You've got plenty of answers telling you how to fix your repeating image problem, but in case you decide to use a CSS design, here is something to get you started. This will eliminate the need for an image. You'll use a lot less HTML and it's more configurable.
你有很多答案告诉你如何解决重复的图像问题，但如果你决定使用 CSS 设计，这里有一些东西可以帮助你开始。这将消除对图像的需要。您将使用更少的 HTML，而且它的可配置性更强。
Demo: http://jsfiddle.net/ThinkingStiff/fJEJf/
演示：http: //jsfiddle.net/ThinkingStiff/fJEJf/
HTML:
HTML：
<ul>
<li><a class="a" href="index.html">Home</a></li><!--
--><li><a class="a" href="aboutus.html">About Us</a></li><!--
--><li><a class="a" href="T&C.html">Training</a></li><!--
--><li><a class="a" href="services.html">Services</a></li><!--
--><li><a class="a" href="Contactus.html">Contact Us</a></li>
</ul>
CSS:
CSS：
ul {
background-color: #d0e9ff;
margin: 0;
padding: 0;
white-space: nowrap;
}
li {
display: inline-block;
padding: 4px;
width: 19.5%;
}
a {
background-color: gray;
border-radius: 16px;
color: white;
display: block;
font: bold 13px arial, verdana, san-serif;
height: 32px;
line-height: 32px;
text-align: center;
text-decoration: none;
}
Output:
输出：
回答by Justin T.
Seems to me like a typo. Did you try replacing background-repeat: no-repeatby style="background-repeat: no-repeat"?
在我看来像是打字错误。您是否尝试替换background-repeat: no-repeat为style="background-repeat: no-repeat"？
EDIT :I saw your website, and the correct CSS is not only this.
编辑：我看到了你的网站，正确的 CSS 不仅如此。
You need to put an id="menu"in you <table>tag, and then put this somewhere in head
你需要id="menu"在你的<table>标签里放一个，然后把它放在head
<style>
#menu td {
background-position: center center;
background-repeat: no-repeat;
}
</style>
Also, as stated by other members, you better place image background in the css properties itself, (its own stylesheet actually) and not in HTML code.
此外，正如其他成员所说，您最好将图像背景放在 css 属性本身（实际上是它自己的样式表）而不是 HTML 代码中。
回答by Mihalis Bagos
You can use:
您可以使用：
style="background: url('images/button.jpg') top left no-repeat;"
回答by livemaker
<style>
#img_center {
background-position: center center;
background-repeat: round;
}
</style>
This worked for me
这对我有用
