css mask实现图片重叠，图片切角

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
这是一个非常有趣的元素，可以实现元素遮罩部分，点击查看mdn-mask的文档
也可以通过如下的demo来了解这个属性的有趣之处，我们实现的效果如下

demo

这个demo并不是一张图片，而是两张图片在一起实现的效果，只需要加一行mask即可实现，代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<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>mask demo</title>
    <style>
        .box{
            position: relative;
            width: 500px;
            height: 400px;
            background: url(./img3.jpg) no-repeat;
            background-size: cover;
            margin: 80px auto;
        }
        .box::after{
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: url(./img5.jpg) no-repeat;
            background-size: cover;
            -webkit-mask: linear-gradient(110deg, #000 10%,  transparent 70%, transparent);
            mask: linear-gradient(110deg, #000 10%,  transparent 70%, transparent); 

        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

可以自行copy代码查看效果，利用mask来实现的图片重叠，接下来是切角

切角效果图

<!DOCTYPE html>
<html lang="zh-CN">
<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>mask demo</title>
    <style>
        .box{
            position: relative;
            width: 500px;
            height: 400px;
            background: url(./img3.jpg) no-repeat;
            background-size: cover;
            margin: 80px auto;
            /* 图片切角 */
            -webkit-mask:
                linear-gradient(135deg, transparent 15px, #fff 0)
                top left,
                linear-gradient(-135deg, transparent 15px, #fff 0)
                top right,
                linear-gradient(-45deg, transparent 15px, #fff 0)
                bottom right,
                linear-gradient(45deg, transparent 15px, #fff 0)
                bottom left;
            -webkit-mask-repeat: no-repeat;
            mask:
                linear-gradient(135deg, transparent 15px, #fff 0)
                top left,
                linear-gradient(-135deg, transparent 15px, #fff 0)
                top right,
                linear-gradient(-45deg, transparent 15px, #fff 0)
                bottom right,
                linear-gradient(45deg, transparent 15px, #fff 0)
                bottom left;
            mask-repeat: no-repeat;
        }
        .box::after{
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: url(./img5.jpg) no-repeat;
            background-size: cover;
            -webkit-mask: linear-gradient(110deg, #000 10%,  transparent 70%, transparent);
            mask: linear-gradient(110deg, #000 10%,  transparent 70%, transparent); 

        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

很有意思的属性，大家可以自己试试，不过mask兼容性很差

关于浏览器的支持程度

mask支持程度

最后编辑于：2021.10.13 11:35:52