衣服换装效果实现

最新推荐文章于 2024-07-25 09:24:40 发布

路光.

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量115

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_41429765/article/details/131643690

版权

 <style>
        *{
            margin:0;
            padding: 0;
        }
        .card{
            width:300px;
            height:500px;
            position: relative;
            margin: 50px auto 0 auto;
        }
        .source{
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .skirt{
            position: absolute;
            z-index: 2;
            /*相当于left:0;top:0;bottom:0;right:0;*/
            inset:0; 
            /* background-size: 50% 30%; */
            background: skyblue;/*切换颜色修改这个值即可*/
            /* 这个需要变色的图片必须是黑色的 */
            --mask:  url('https://img1.baidu.com/it/u=1595037746,1973005857&fm=253&fmt=auto&app=138&f=PNG?w=260&h=261') 50% 70% / 50% 30% no-repeat;/*将设置的背景颜色，放到这个图片山使用，覆盖这个图片原有的颜色*/
            mask:var(--mask);
            -webkit-mask:var(--mask);/*设置兼容模式*/
            /* background-position: center; */
            mix-blend-mode: multiply;/*图片是衣服有褶皱效果，添加这个属性才会有褶皱效果*/
        }
    </style>

<body>
    <div class="card">
        <!-- 这个图片的颜色必须是白色的 -->
        <img src="https://img1.baidu.com/it/u=3003107513,3405003743&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500" class="source" alt="">
        <div class="skirt"></div>
    </div>
</body>