CSS 利用mask-image遮罩剪裁各种各样图案

最新推荐文章于 2024-09-10 22:50:51 发布

ymszss

最新推荐文章于 2024-09-10 22:50:51 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： css 前端 css3 html5

本文链接：https://blog.csdn.net/ymszss/article/details/121649624

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS 利用mask-image遮罩剪裁各种各样图案

先看效果

在这里插入图片描述

实现

在这里插入图片描述
我随便从网上找了几张不规则的图，用来演示剪切出的各种图案。

    <img src="./logo.jpg" alt="" class="cover">
    <img src="./logo.jpg" alt="" class="cover start">
    <img src="./logo.jpg" alt="" class="cover leng">
    <style>
        .cover {
            width: 202px;
            height: 268px;
            mask-image: url(./cover.png);
            -webkit-mask-image: url(./cover.png);
            mask-position: 0;
            -webkit-mask-position: 0;
            mask-size: 100%;
            -webkit-mask-size: 100%;
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
        }

        .start {
            mask-image: url(./start.png);
            -webkit-mask-image: url(./start.png);
        }

        .leng {
            mask-image: url(./leng.png);
            -webkit-mask-image: url(./leng.png);
        }
    </style>