分类: H5/JS/CSS

网页背景图片的拉伸

[ 2007-12-28 16:34:55 | 作者: admin ]
字号: 大 | 中 | 小
内容来源：http://adriano.blogbus.com/logs/6799798.html

方法一：用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&#39;>超链接不能用了</a></td>
</tr>
<tr>
<td style='cursor:hand;color:red' onclick='alert(11)'>click不能用了</td>
</tr>
</table>
</div>

 

 

这个问题郁闷我好久,终于找到了一个解决办法,共享代码,如下:

 

在<table标记中加入style='position:absolute' 或position:relative 就可以解决该问题

具体代码如下:

<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&#39;>超链能用了</a></td>
</tr>
<tr>
<td style='cursor:hand;color:red' onclick='alert(11)'>click能用了</td>
</tr>
</table>
</div>
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=1052

这篇日志没有评论。

此日志不可发表评论。