使用CSS3背景混合模式实现的打印缺墨图像特效

Low-ink CSS background-blend-mode image effect

css3, image, blend-mode

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1446
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.photo {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Point_Reyes_Lighthouse_%28April_2012%29.jpg/593px-Point_Reyes_Lighthouse_%28April_2012%29.jpg), url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Point_Reyes_Lighthouse_%28April_2012%29.jpg/593px-Point_Reyes_Lighthouse_%28April_2012%29.jpg), url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Point_Reyes_Lighthouse_%28April_2012%29.jpg/593px-Point_Reyes_Lighthouse_%28April_2012%29.jpg);
    background-position: center center;
    background-blend-mode: screen, overlay;
}
.horizontal {
    background-size: 100% 100%, 10000% 100%;
}
.vertical {
    background-size: 100% 100%, 100% 1000%;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: #222;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100vh;
}
.photo {
    width: 45vw;
    height: 36.4248vw;
    margin: 10px;
}

HTML

Low-ink CSS background-blend-mode image effect

css3, image, blend-mode

编辑器支持Emmet

快捷键

Low-ink CSS background-blend-mode image effect

css3, image, blend-mode

使用CSS3线性渐变和合成模式（blend-mode）实现的5种图像特效

使用CSS3滤镜/合成模式和伪元素实现仿Spotify网站风格的图像双色特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：