html半透明遮罩,如何制作网页半透明遮罩效果

我们经常在浏览网页时会看到遮罩的效果，比如在点击登录后常常会弹出登录框，它的背景就是常用一种半透明的遮罩来禁止登录框这外的操作。现在我们来看看这种半透明遮罩效果应该怎么实现。

大致的思路是在body上面放置2个层，一个是半透明的，遮盖整个屏幕；另一个是显示你要显示的内容的。需要注意的是：这两个层的position都要设为absolute;，因为只有设为absolute时， z-index：属性才会生效！

首先碰到的问题就是显示器的宽度问题。解决如下：

用JS判断你的显示器分辨率，获取长与宽两个参数，将这两个参数赋给第一个层，作为它的长与宽的像素值，这样的话，无论在多大或多小的显示器上，都可以显示同样的效果。

其次是半透明属性：

filter:alpha(opacity=50); //IE专有属性， 设置层的透明度为 50% ，-moz-opacity:0.5;    //火狐FF 专有属性，设置层的透明度为 50%。这两条属性都要加上，因为IE、火狐对其中的单一一条并不兼容～～～

还有一点，你的遮罩层样式中，一定要设置 width 与 height ，否则 透明属性不起效～～

然后呢，就是在按钮onclick 的时候，写JS 将两个层显示出来就行了

另外还有两个JQ的组件可以下载使用：shadeBlock和ThickBox

这是 ThickBox 最简单的功能. 此例子放了一张图片在 ThickBox 里.

使用说明:

* 创建一个 link 元素 ()

* 给 link 一个 class 属性并附值为 thickbox (class="thickbox")

* 在 href 属性里给图片文件 (.jpg .jpeg .png .gif .bmp) 提供一个路径