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

html半透明遮罩,如何制作网页半透明遮罩效果相关推荐

制作网页雪花飘飘效果
<SCRIPT language=JavaScript1.2> var snowsrc="image/1.png" var no = 11;//雪花数量var ns4u ...
网页制作 HTML实现遮罩层的方法 HTML中如何使用遮罩层
网页制作 HTML实现遮罩层的方法 HTML中如何使用遮罩层 Web页面中使用遮罩层,可防止重复操作,提示loading:也可以模拟弹出模态窗口. 实现思路:一个DIV作为遮罩层,一个DIV显示loa ...
CSS3制作文字半透明倒影效果
CSS3制作文字半透明倒影效果 /*------------------ITEYE 祈祷幸福(http://qidaoxingfu.iteye.com)原创转载请注明---------------- ...
MOGRT视频制作库 Premiere遮罩/转场/特效视频剪辑效果模板库预设
视频制作库 Premiere遮罩/转场/特效视频剪辑效果库 Premiere Pro CC |无需插件|可调整大小| 2.95 Gb 超过1000种专业预设和后效元素.视频库包含超过250种随时可用的 ...
Unity使用Shader快速制作一个圆形遮罩
Unity使用Shader快速制作一个圆形遮罩如何用Shader来做出圆形.切倒角和边缘虚化 Unity使用Shader快速制作一个圆形遮罩橙子前言一.创建Shader 二.创建Material ...
html5 svg 遮罩,HTML5 SVG和CSS3制作动态文字遮罩背景特效
在上一个教程中,我们使用SVG和CSS制作了文字遮罩效果.在这个教程中,我们将要使用SVG和CSS3来向你展示两种动态遮罩文字背景的效果.第一中效果是在鼠标滑过遮罩文字的时候,文字背景会有彩虹背景动画 ...
【SwiftUI模块】0026、SwiftUI制作具有半透明底部标签栏滚动效果的动画轮播滑块
SwiftUI模块系列 - 已更新26篇 SwiftUI项目 - 已更新2个项目往期Demo源码下载技术:SwiftUI.SwiftUI3.0.半透明底部标签栏.滚动效果.动画轮播滑块运行环境: ...
会声会影2023怎么使用遮罩制作方法会声会影遮罩能不能自己描边
视频画面显得单调的话,其实可以通过添加遮罩描边的方式,让画面变得更有趣味.会声会影既提供了遮罩模板,也提供遮罩制作器可供自己制作.下面就让我们详细来了解下会声会影2023怎么使用遮罩制作方法,会声会影 ...
HTML怎么制作镂空文字遮罩,用纯 CSS 实现镂空效果
背景被裁剪为文字的前景色.第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上,这个玩意用得到处都是. 这样,做简单的图片背景镂空效果便不再困难了.关键代码只有几行. ...
HTML怎么制作镂空文字遮罩,用纯CSS实现镂空效果的示例代码
近来研究了一下镂空效果. background-clip: text 背景被裁剪为文字的前景色.第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上,这个玩意用得到处都 ...

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

html半透明遮罩,如何制作网页半透明遮罩效果相关推荐

最新文章

热门文章