PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> CSS >> 

css实现背景图片自适应大小

css实现背景图片自适应大小

来源:phperz.com  作者:phperz.com  发布时间:2008-07-12
在制作网站时,有时我们需要用背景图片渐变来填充一些表格td,

在制作网站时,有时我们需要用背景图片渐变来填充一些表格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>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp; </p></td> </tr> </table>

<p>图片原始大小<img src="/templets/image/menu2_bg.png" /></p>
</body>
</html>

IE下效果如下:

 

Tags: css   背景图片   自适应   图片   效果   C   背景  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号