Question

嗨我正在使用3px * 10px渐变图像来填充我想要用这个图像填充完整的单元格，如果单元格的内容增加，我还想自动拉伸图像。但是我不想要它重复，因为图像是一个渐变，它看起来很难看。有人可以帮忙。

代码snipet如下。

<html>
<head></head>
<body>
<table border=1>
<tr><td>a<td rowspan="9" style="background-image:url('images/bg_menu_hov.gif');background-repeat:no-repeat; height:100%;">&nbsp<td>b</tr>
<tr><td>c<td>d</tr>
<tr><td>e<td>f</tr>
<tr><td>c<td>d</tr>
<tr><td>e<td>f</tr>
<tr><td>c<td>d</tr>
<tr><td>e<td>f</tr>
<tr><td>c<td>d</tr>
<tr><td>e<td>f</tr>
</table>
<body>
</html>

Answer 1

根据图片的不同，您需要以不同方式设置background-repeat。

拉伸图像可能不是一个好主意。通常，您应该使梯度宽或足够高，以适合您的设计。将渐变渐变为与您设置的背景颜色相同的颜色是个好主意。

根据你的图像大小判断（3px * 10px）我猜你需要将background-repeat设置为'repeat-x'。

Answer 2

如果你的代码建议，你使用的是3px宽的图像，但是如果它是平铺的，它看起来真的很难看，它看起来不太好看。

如果渐变是纯垂直的，请考虑将原始图像缩小为1px宽。这样，水平重复它就不会有噪音。

如何使用图像填充单元格

2 个答案: