如何用css形成一个遮罩教程

来源：互联网 2023-03-16 19:15:36 213

html的遮罩是在程序执行时经常使用的功能，可以让我们在某些操作之后禁止操作整个界面，直到满足某些条件才可以再进行操作

工具/原料

首先需要模拟新建一个按钮和这个这样的存储div，所有需要新建两个div，其中id为zz的div为遮罩

如何用css形成一个遮罩教程

之后给按钮驼艳绑定一个方法，而遮罩的处理就是显示这个div，可以看到程序的处理是显示这个遮罩，而2000毫秒（也就是两秒之后）隐藏这个遮罩

function showCSS() {

document.getElementById("ZZ").style.display ="block";

setTimeout(function(){

document.getElementById("ZZ").style.display ='none';

},2000);

}

如何用css形成一个遮罩教程

可看到使用setTimeout,function是方法主题，后面的2000为毫秒延迟时间，在羞段2秒之后遮罩关闭

如何用css形成一个遮罩教程

之后还需要在style中定义一个遮罩的css样式属性，#zz绑定id,则表示这个id使用这个css样式

如何用css形成一个遮罩教程

其中

-moz-opacity: 0.1;

opacity: .1;

filter: alpha(opacity=10);

部分表示遮罩的透明度，值越小越透明，值越大颜色越深，需要合理控制这个值保证界面的整体效果

如何用css形成一个遮罩教程

宽度高度则是控制这个遮罩的大小，以及这个遮罩的位置，其中index表示遮罩的层级，值越大表示层级越高贪压慎，在越上层，所有一般遮罩层这个值都比较大

如何用css形成一个遮罩教程

如上操作之后，会出现效果点击按钮，出现遮罩

如何用css形成一个遮罩教程

7该信息未经授权抓取自百度经验

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS HTML

上一篇：怎么制作简单的网页 html简单的网页下一篇：XHTML和HTML有什么区别吗