这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章。下次再有人问就直接把这篇文章的URL丢出去就好了。这个效果很简单所以我就不做太多说明了,具体的看看代码注释就会明白。下面就是全部代码,复制到HTML中就可以运行的。
这个效果是没有什么难点了,最困难的也许就是半透明的实现了吧。CSS3的opacity和IE的alpha都可以实现半透明,但是那是整个元素的半透明。使用那种方法就意味着子元素也被半透明了,所以我们必须把透明设置到背景上,而不是整个元素上。CSS3中可以直接使用rgba来设置。IE中没有这样的方法,但是可以使用渐变滤镜来代替它,因为渐变滤镜也是支持透明的。还有,在IE9中,同时兼容CSS3的透明和滤镜的透明,如果两个都使用,页面的透明度就会不对。所以我们在IE9中屏蔽了其中一种透明效果。
还有一点问题就是兼容IE6的,IE6不支持fixed所以我们需要使用absolute和动态设置top来兼容它。然后就是mask的大小计算问题,这个也存在一个浏览器差异,其实这个效果中的浏览器差异问题还是挺大的,不过都是一些小问题看到了就会明白没有长篇大论的必要。
已抢66455个
抢已抢37081个
抢已抢20553个
抢已抢2530个
抢已抢18983个
抢