gpt4 book ai didi

html - 即使使用 'background-repeat: no-repeat' 也会重复背景图像

转载 作者:搜寻专家 更新时间:2023-10-31 22:01:25 29 4
gpt4 key购买 nike

我无法停止 td 元素中的图像重复。它看起来很难看。我该如何解决这个问题?我也添加了 background-repeat: no-repeat 代码,但它仍然无法正常工作。请不要建议从我的 td 宽度中删除 %

enter image description here

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

最佳答案

您有很多答案可以告诉您如何解决重复图像问题,但如果您决定使用 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;
}

输出:

enter image description here

关于html - 即使使用 'background-repeat: no-repeat' 也会重复背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8678370/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com