css實現背景圖片自適應大小

來源:互聯網
上載者:User

在製作網站時,有時我們需要用背景圖片漸層來填充一些表格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>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp; </p></td> </tr> </table> phperz.com 

<p>圖片原始大小<img src="http://www.phperz.com/templets/image/menu2_bg.png" /></p>
</body>
</html> 

 

註:使用濾鏡之後可能導致濾鏡之後的按鈕連結等不起作用的情況,解決辦法是將按鈕連結等的position屬性設成relative相對位置。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.