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) 提供一个路径

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值