在製作網站時,有時我們需要用背景圖片漸層來填充一些表格td,
但由於表格裡的內容大小是不固定的,有時內容太長,會把表格撐開有的地方沒有背景,有時內容太短,做好的背景圖沒有全部顯示出來,達不到預期的效果。
有沒有一種方法可以讓背景自動調整,始終都能顯示全部的漸層色,實作類別似平鋪的效果呢?
答案當然是有的,css強大的濾鏡就可以實現,但遺憾的是Firefox不支援,在Firefox盛行的今天,這似乎讓人有點不爽。
如果你對這方法要求不高的話,可以看一下下面的濾鏡代碼。
Code
<!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實現背景圖片自適應大小</title>
</head>
<body>
<table width="200">
<tr> <td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.phperz.com/templets/image/menu2_bg.png', sizingMethod='scale'">
<p>背景圖片自適應大小</p>
<p> </p>
<p> </p>
<p> </p></td> </tr> </table> phperz.com
<p>圖片原始大小<img src="http://www.phperz.com/templets/image/menu2_bg.png" /></p>
</body>
</html>
註:使用濾鏡之後可能導致濾鏡之後的按鈕連結等不起作用的情況,解決辦法是將按鈕連結等的position屬性設成relative相對位置。