图片斜拼接

最新推荐文章于 2026-06-23 23:01:22 发布

原创最新推荐文章于 2026-06-23 23:01:22 发布 · 2.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#图片 #斜拼接 #mask #css #特效

收录于

web前端学习专栏收录该内容

301 篇文章

订阅专栏

本文介绍了一种利用CSS的mask属性来创建图片斜向拼接的特效技术，详细探讨了如何通过调整mask的参数来实现不同角度的图片切割与组合，为网页设计提供了新的视觉效果。

这里写图片描述

原文链接：http://www.alloyteam.com/2016/02/use-the-css-of-the-mask-to-achieve-a-picture-diagonal-mosaic/

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .img-container {
                position: relative;
                width: 200px;
                height: 100px;
                border: 5px solid red;
            }

            .img-left {
                background: url(img/1.jpg);
                background-size: cover;
                width: 100%;
                height: 100px;
            }

            .img-right {
                position: absolute;
                left: 0;
                top: 0;
                background: url(img/2.jpg);
                background-size: cover;
                -webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%);
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div class="img-container">
            <div class="img-left"></div>
            <div class="img-right"></div>
        </div>
    </body>

</html>