背景图像重复，即使使用“Background -repeat:no-repeat”

Question

我不能停止我的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>    

Answer 1

你已经有很多的答案告诉你如何解决重复的图像问题，但是如果你决定使用CSS设计，这里有一些东西可以让你入门。这将消除对图像的需求。您将使用更少的HTML，并且它更具可配置性。

演示：http://jsfiddle.net/ThinkingStiff/fJEJf/

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：

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;
}

输出：

​

​

Answer 2

必须在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>

Answer 3

在我看来像是打字错误。你有没有试过用style="background-repeat: no-repeat"替换background-repeat: no-repeat？

编辑:我看到你的网站了，正确的CSS不仅仅是这样。

您需要在<table>标记中放入一个id="menu"，然后将其放入head中的某个位置

<style>
#menu td {
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

此外，正如其他成员所说，最好将图像背景放在css属性本身(实际上是它自己的样式表)中，而不是放在HTML代码中。