DIV背景图片随DIV高度宽度变化而自动拉伸
方法一：用css滤镜，问题是只支持IE5.5以上版本
方法二：用两个层，一个放图片，用<img>，为底部层；
另一个作页面显示层。
建议用方法
<html>
<head>
<title>西狐测试</title>
</head>
<body STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hooyesbg.gif', sizingMethod='scale');" >
测试一下网页背景拉伸:)
</body>
</html>
实际使用后，发现有个需要注意的地方——使用AlphaImageLoader滤镜后，图片区域内的链接与按钮都将会失效，解决的办法是使用其他元素放置链接与按钮，浮动在该元素之上。
由于是png透明图,并且使用AlphaImageLoader可以实现图片的缩放,所以采用AlphaImageLoader;代码如下:
以下代码中,使用了AlphaImageLoader后,css中的cursor,超级链接,onclick事件等都失效了;;;
<script language=javascript>
function tests(){
alert(event.srcElement.outerHTML);
}
document.body.attachEvent("onclick",tests);
</script>
<style type="text/css">
#idDiv{left:140px; height:400;
width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/back/db-0.png',sizingMethod='scale');
background-image:none;
}
</style>
<div id='idDiv'>
<table>
<tr>
<td style='cursor:hand;color:red'><a href='http://www.sohu.com'>超链接不能用了</a></td>
</tr>
<tr>
<td style='cursor:hand;color:red' οnclick='alert(11)'>click不能用了</td>
</tr>
</table>
</div>
这个问题郁闷我好久,终于找到了一个解决办法,共享代码,如下:
在<table标记中加入style='position:absolute' 或position:relative 就可以解决该问题
即父标记应用AlphaImageLoader滤镜后再其子元素标记中应用position:relative 或position:absolute
具体代码如下:
<script language=javascript>
function tests(){
alert(event.srcElement.outerHTML);
}
document.body.attachEvent("onclick",tests);
</script>
<style type="text/css">
#idDiv{left:140px; height:400;
width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/back/db-0.png',sizingMethod='scale');
background-image:none;
}
</style>
<div id='idDiv'>
<table style='position:relative'>
<tr>
<td style='cursor:hand;color:red'><a href='http://www.sohu.com'>超链能用了</a></td>
</tr>
<tr>
<td style='cursor:hand;color:red' οnclick='alert(11)'>click能用了</td>
</tr>
</table>
</div>