图片美化画笔

最新推荐文章于 2024-10-30 17:26:18 发布

原创最新推荐文章于 2024-10-30 17:26:18 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

21 篇文章

订阅专栏

           
<div class="all pencil-effect" id="all">
        <img src="./image/2.jpg">
    </div>




.pencil-effect {
                margin: 10px 20px 20px;

            }
            
            .pencil-effect img {
                width: 100%;
                vertical-align: top!important;
                margin: 0!important;
                visibility: hidden!important;
                opacity: 0;
            }
            
            .pencil-effect {
                background-image: url(./image/2.jpg);
                background-size: cover;
                background-position: center;
            }
            
            @supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
                .pencil-effect {
                    background-image: url(./image/2.jpg), url(./image/2.jpg), url(./image/2.jpg);
                    background-blend-mode: difference, screen;
                    -webkit-background-blend-mode: difference, screen;
                    -moz-background-blend-mode: difference, screen;
                    -ms-background-blend-mode: difference, screen;
                    -o-background-blend-mode: difference, screen;
                    background-repeat: no-repeat;
                    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
                    filter: brightness(2) invert(1) grayscale(1);
                }
            }