这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章。下次再有人问就直接把这篇文章的URL丢出去就好了。这个效果很简单所以我就不做太多说明了,具体的看看代码注释就会明白。下面就是全部代码,复制到HTML中就可以运行的。

<!DOCTYPE html>
<style>
#mask {
 position:fixed;width:100%;
 top:0px;left:0px;
 _position:absolute;
 _top:expression(documentElement.scrollTop);
 background:rgba(0,0,0,0.5);
 background:transparent\9;
 filter:progid:DXImageTransform.Microsoft.Gradient(
 startColorStr=#80000000,endColorStr=#80000000
 );
 display:none;
}
#mask_td {text-align:center;}
</style>
<img
 src="/UploadFiles/2021-04-02/TheMagicConch.jpg">

  这个效果是没有什么难点了,最困难的也许就是半透明的实现了吧。CSS3的opacity和IE的alpha都可以实现半透明,但是那是整个元素的半透明。使用那种方法就意味着子元素也被半透明了,所以我们必须把透明设置到背景上,而不是整个元素上。CSS3中可以直接使用rgba来设置。IE中没有这样的方法,但是可以使用渐变滤镜来代替它,因为渐变滤镜也是支持透明的。还有,在IE9中,同时兼容CSS3的透明和滤镜的透明,如果两个都使用,页面的透明度就会不对。所以我们在IE9中屏蔽了其中一种透明效果。
  还有一点问题就是兼容IE6的,IE6不支持fixed所以我们需要使用absolute和动态设置top来兼容它。然后就是mask的大小计算问题,这个也存在一个浏览器差异,其实这个效果中的浏览器差异问题还是挺大的,不过都是一些小问题看到了就会明白没有长篇大论的必要。

标签:
JavaScript,大图,遮罩层,图片

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com