position:relative解决filter滤镜问题

本文介绍了解决网页中背景图片自动拉伸导致链接失效的方法,即通过添加特定的样式来修复;同时,还提供了让背景透明但保持内容不透明的技巧。

一、解决背景自动拉伸带来的链接失效的问题。 ­

    比如在表格中使用style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='背景图片地址', sizingMethod='scale')"可以使当表格宽度超过背景图片宽度时背景图片会自动拉伸而不是重复平铺,但也带来问题,表格内的所有链接会因而失效,解决的表办就是给链接所在的内镶表格或单元格添加style="position:relative"。 ­

    如果是DIV,还需嵌入一个DIV,如:

<div style="width:200px; height:200px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' 图片地址', sizingMethod='scale';)">

         <div style="position:relative; ">

                <a style="position:relative;" href="http://www.baidu.com">百度</a>

        </div>

</div>

­

二、背景透明致使内容也随之透明的问题。 ­

    例如我们给表格添加style="filter:alpha(opacity=40)",这样表格背景及其中内容就有了透明度,如果要使表格中的文字及图片等不随之透明,给它们加上style="position:relative"即可。 ­

­

    还有什么没试过,有这方面经验的下面补充!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值