Css 如何用图像填充单元格_Css

Css 如何用图像填充单元格

css

Css 如何用图像填充单元格,css,Css,您好，我正在使用3px*10px渐变图像填充一个单元格，我想用这个图像填充整个单元格，而且如果单元格内容增加，我想自动拉伸图像。但是我不想重复，因为图像是渐变的，看起来很难看。有人能帮忙吗代码snipet如下所示 <html> <head></head> <body> <table border=1> <tr><td>a<td rowspan="9" style="background-image:url

您好，我正在使用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>


a b
光盘
环境足迹
光盘
环境足迹
光盘
环境足迹
光盘
环境足迹

根据图像的不同，您需要以不同的方式进行设置

拉伸图像可能不是一个好主意。一般来说，你应该使你的梯度足够宽或高，以适应你的设计。将渐变淡出到与设置的背景色相同的颜色是个好主意

从您的图像大小（3px*10px）判断，我猜您需要将“背景重复”设置为“重复-x”。

如果按照代码的建议，您使用的图像是3px宽的，但如果平铺的话看起来非常难看，那么它看起来不太可能更好

<>如果梯度是纯垂直的，考虑将原始图像缩小为1px宽。这样就不会因为水平重复而产生噪音。

说“单元格”，是指表格的单元格还是div？（或其他）拉伸这么小的渐变图像无论你做什么都会看起来很难看。它会很快变得块状/像素化，因为你从一个显微图像开始。如果它变得像素化就好了。因为我想知道这种情况下的解决方法，然后将“不重复”改为“重复”，这将平铺图像，而不是用一个像素宽的图像拉伸图像，拉伸和平铺可以获得相同的视觉效果。平铺更容易实现。如果是我，我会将图像设置为一个像素宽，并且比需要的更高，然后使用repeat-x水平平铺。当涉及到快速加载页面时，1x60图像和1x600图像之间的差异并不是那么重要。好吧，这只会平铺图像。它不会像我说的那样拉伸，通常的解决方法是提供（在您的场景中）足够高的图像。CSS3。