[英]Background image repeating even with 'background-repeat: no-repeat'
I can't stop the image repetition in my td
elements. 我无法阻止我的
td
元素中的图像重复。 It looks very ugly. 它看起来很丑陋。 How do I solve this?
我该如何解决这个问题? I've added
background-repeat: no-repeat
code also, but it's still not working. 我添加了
background-repeat: no-repeat
代码,但它仍然无效。 Please don't suggest removing the %
from the width of my td
. 请不要建议从我的
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>
You must set the background-repeat
property within a style
attribute: 您必须在
style
属性中设置background-repeat
属性:
<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>
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. 你有很多答案告诉你如何修复你的重复图像问题,但如果你决定使用CSS设计,这里有一些东西可以帮助你入门。 This will eliminate the need for an image.
这将消除对图像的需要。 You'll use a lot less HTML and it's more configurable.
您将使用更少的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: 输出:
Seems to me like a typo. 在我看来就像一个错字。 Did you try replacing
background-repeat: no-repeat
by style="background-repeat: no-repeat"
? 您是否尝试使用
style="background-repeat: no-repeat"
替换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
你需要在你的
<table>
标签中加上一个id="menu"
,然后将它放在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代码中。
<style>
#img_center {
background-position: center center;
background-repeat: round;
}
</style>
This worked for me 这对我有用
您可以使用:
style="background: url('images/button.jpg') top left no-repeat;"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.