在制作网站时,有时我们需要用背景图片渐变来填充一些表格td,
但由于表格里的内容大小是不固定的,有时内容太长,会把表格撑开有的地方没有背景,有时内容太短,做好的背景图没有全部显示出来,达不到预期的效果。
有没有一种方法可以让背景自动伸缩,始终都能显示全部的渐变色,实现类似平铺的效果呢?
答案当然是有的,css强大的滤镜就可以实现,但遗憾的是Firefox不支持,在Firefox盛行的今天,这似乎让人有点不爽。
如果你对这方法要求不高的话,可以看一下下面的滤镜代码。
以下为引用的内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css实现背景图片自适应大小-www.phperz.com</title> </head>
<body> <table width="200"> <tr> <td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/templets/image/menu2_bg.png', sizingMethod='scale'"> <p>背景图片自适应大小</p> <p> </p> <p> </p> <p> </p></td> </tr> </table>
<p>图片原始大小<img src="/templets/image/menu2_bg.png" /></p> </body> </html>
|
IE下效果如下: