1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html半透明遮罩 如何制作网页半透明遮罩效果

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

时间:2023-04-15 04:23:35

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。