js制作遮罩层详解

最新推荐文章于 2024-02-18 02:37:57 发布

小苏(º﹃º )

最新推荐文章于 2024-02-18 02:37:57 发布

阅读量7.5k

点赞数 9

分类专栏： javascript 文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_45850095/article/details/117202225

版权

遮罩层的制作

遮罩层的作用：

1.首先我们要明白，遮罩层的作用就是将指定区域覆盖，使其失去原有的功能(如: 点击事件，移入移出效果)。

遮罩层的原理

在指定区域加上一个半透明的蒙版，也可以再在蒙版上面再加一个你想要实现的效果。一般通过定位(position) ，使用层级(z-index)来实现遮罩层的效果。

遮罩层相关代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
   
            width: 100%;
            height: 100%;
        }
        .div1{
   
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        .div2{
   
            width: 200px;
            height: 200px