1 概述
1.1 前言
使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果,共列举了20种图片显示效果。
2 效果列表
2.1 铅笔画效果
效果示例
![21613ffa5b7121b3e7f9cac53f5c939a.png](https://img-blog.csdnimg.cn/img_convert/21613ffa5b7121b3e7f9cac53f5c939a.png)
SCSS代码
.pencil-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: invert(1)) and (background-blend-mode: difference) { background-image: $url, $url; background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(2) invert(1) grayscale(1); box-shadow: inset 0 0 0 1px black; }}
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。
2.2 水彩效果
效果示例
![0f4856b4109e513ab7a8028c2bf816c7.png](https://img-blog.csdnimg.cn/img_convert/0f4856b4109e513ab7a8028c2bf816c7.png)
SCSS代码
.watercolor-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: blur(2px)) and (mix-blend-mode: multiply) { position: relative; overflow: hidden; &:before, &:after { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; } &:before { background-image: $url, $url; background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(2) invert(1) grayscale(1); box-shadow: inset 0 0 0 1px black; } &:after { background-image: $url; background-position: center; mix-blend-mode: multiply; filter: brightness(1.3) blur(2px) contrast(2); } }}
2.3 浮雕效果
效果示例
![a09aa165d0831cb58e78aff7a3eb2fae.png](https://img-blog.csdnimg.cn/img_convert/a09aa165d0831cb58e78aff7a3eb2fae.png)
SCSS代码
.emboss-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: invert(1)) and (background-blend-mode: difference, screen) { background-image: $url, $url, $url; background-blend-mode: difference, screen; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center; filter: brightness(2) invert(1) grayscale(1); }}
2.4 彩铅效果
效果示例
![58aadc99d3ce5fb5db69c65a526bc575.png](https://img-blog.csdnimg.cn/img_convert/58aadc99d3ce5fb5db69c65a526bc575.png)
SCSS代码
.colored-pencil-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: invert(1)) and (mix-blend-mode: color) { position: relative; &:before, &:after { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; box-shadow: inset 0 0 0 1px black; } &:before { background-image: $url, $url; background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(2) invert(1) grayscale(1); } &:after { background: inherit; mix-blend-mode: color; } }}
2.5 黑板效果
效果示例
![d21137d9d35604807dd8bec33883eae3.png](https://img-blog.csdnimg.cn/img_convert/d21137d9d35604807dd8bec33883eae3.png)
SCSS代码
.chalkboard-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: grayscale(1)) and (background-blend-mode: difference) { background-image: $url, $url; background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(1.5) grayscale(1); }}
2.6 彩色黑板效果
效果示例
![a22555c2b2b4caf822a939199178ddc6.png](https://img-blog.csdnimg.cn/img_convert/a22555c2b2b4caf822a939199178ddc6.png)
SCSS代码
.colored-chalkboard-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: brightness(2)) and (background-blend-mode: color, difference) { background-image: $url, $url, $url; background-size: cover; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center; background-blend-mode: color, difference; filter: brightness(2); }}
2.7 喷枪效果
效果示例
![841045bf2c408efdb2cc641ff59fa22a.png](https://img-blog.csdnimg.cn/img_convert/841045bf2c408efdb2cc641ff59fa22a.png)
SCSS代码
.airbrush-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) { position: relative; overflow: hidden; &:after { display: block; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; filter: brightness(1.5) saturate(100) blur(5px) contrast(5); mix-blend-mode: multiply; } }}
2.8 绚烂效果
效果示例
![820d05973f0719e9c985f9e1e804d4a9.png](https://img-blog.csdnimg.cn/img_convert/820d05973f0719e9c985f9e1e804d4a9.png)
SCSS代码
.hallucination-effect { $url : url(photo.jpg); $offset : 5px; background-image: $url; background-size: cover; background-position: center; @supports (mix-blend-mode: multiply) { position: relative; overflow: hidden; background-color: magenta; background-blend-mode: screen; &:before, &:after { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; mix-blend-mode: multiply; transform: scale(1.05); } &:before { background-color: yellow; background-blend-mode: screen; transform-origin: top left; } &:after { background-color: cyan; background-blend-mode: screen; transform-origin: bottom right; } }}
2.9 绒布效果
效果示例
![dab6792d9c528a11901f5e89676617e7.png](https://img-blog.csdnimg.cn/img_convert/dab6792d9c528a11901f5e89676617e7.png)
SCSS代码
.flannel-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (background-blend-mode: overlay) { background-image: $url, $url, $url; background-position: center; background-size: 100%, 100000% 100%, 100% 100000%; background-blend-mode: overlay; }}
2.10 水平低墨
效果示例
![3635adf510db1a6f7dd336934e422527.png](https://img-blog.csdnimg.cn/img_convert/3635adf510db1a6f7dd336934e422527.png)
SCSS代码
.low-ink-x-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (background-blend-mode: screen, overlay) { background-image: $url, $url, $url; background-size: 100% 100%, 10000% 100%; background-blend-mode: screen, overlay; }}
2.11 垂直低墨效果
效果示例
![aecc7a77309ebc57bdb0b877aa8328e4.png](https://img-blog.csdnimg.cn/img_convert/aecc7a77309ebc57bdb0b877aa8328e4.png)
SCSS代码
.low-ink-y-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (background-blend-mode: screen, overlay) { background-image: $url, $url, $url; background-size: 100% 100%, 100% 1000%; background-blend-mode: screen, overlay; }}
2.12 拼贴效果
效果示例
![8b35ab5b964dc4a8d5c19cfb729fc32a.png](https://img-blog.csdnimg.cn/img_convert/8b35ab5b964dc4a8d5c19cfb729fc32a.png)
SCSS代码
.collage-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (background-blend-mode: overlay) { background-image: $url, $url, $url, $url, $url, $url; background-size: 200%, 80%, 60%, 50%, 40%, 100%; background-position: 50%, 80%, 30%, 0; background-blend-mode: overlay; background-repeat: no-repeat; }}
2.13 马赛克效果
效果示例
![801ea9143a07d616591aa4aa97da7cf3.png](https://img-blog.csdnimg.cn/img_convert/801ea9143a07d616591aa4aa97da7cf3.png)
SCSS代码
.mosaic-effect { $url : url(photo.jpg); background-image: $url, $url; background-size: cover, 5% 5%; background-position: center; background-blend-mode: overlay;}
2.14 图片边框效果
效果示例
![35131500796106f5a344f086cd5a63bb.png](https://img-blog.csdnimg.cn/img_convert/35131500796106f5a344f086cd5a63bb.png)
SCSS代码
.photo-border-effect { $url : url(photo.jpg); background-image: $url, $url; background-position: center; background-size: 60%, 20%; background-repeat: no-repeat, repeat;}
2.15 红外效果
效果示例
![fc4a160949e7362a764842e15922feda.png](https://img-blog.csdnimg.cn/img_convert/fc4a160949e7362a764842e15922feda.png)
SCSS代码
.infrared-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; filter: hue-rotate(180deg) saturate(2);}
2.16 夜视效果
效果示例
![729f0df92069b248327f947370f269d0.png](https://img-blog.csdnimg.cn/img_convert/729f0df92069b248327f947370f269d0.png)
SCSS代码
.night-vision-effect { $url : url(photo.jpg); $line-width: 5px; background-image: $url , radial-gradient( #0F0, #000 ), repeating-linear-gradient( transparent 0, rgba(0,0,0,0.1) $line-width/2, transparent $line-width ); background-size: cover; background-position: center; background-blend-mode: overlay;}
2.17 沃霍尔效果
效果示例
![e3381e0b09ba79a118cb600f5d22143f.png](https://img-blog.csdnimg.cn/img_convert/e3381e0b09ba79a118cb600f5d22143f.png)
SCSS代码
.warhol-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (background-blend-mode: color) { background-image: linear-gradient( #14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100% ), linear-gradient( #FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100% ), $url; background-size: 50% 100%, 50% 100%, 50% 50%; background-position: top left, top right; background-repeat: no-repeat, no-repeat, repeat; background-blend-mode: color; }}
2.18 颜色校正效果
效果示例
![194f8eaf1438d414793f07211eb1bf54.png](https://img-blog.csdnimg.cn/img_convert/194f8eaf1438d414793f07211eb1bf54.png)
SCSS代码
.selective-color-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: brightness(3)) and (mix-blend-mode: color) { position: relative; &:before, &:after { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; background-color: red; background-blend-mode: screen; mix-blend-mode: color; filter: brightness(3); } }}
2.19 水平镜像效果
效果示例
![ae6f59c6564a9d00a96ea24f7d3f7bdd.png](https://img-blog.csdnimg.cn/img_convert/ae6f59c6564a9d00a96ea24f7d3f7bdd.png)
SCSS代码
.mirror-x-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (transform: scaleX(-1)) { position: relative; &:before, &:after { display: block; content: ""; position: absolute; top: 0; bottom: 0; background: inherit; } &:before { left: 0; right: 50%; transform: scaleX(-1); } &:after { left: 50%; right: 0; } }}
2.20 垂直镜像效果
效果示例
![bf7aed08f93c72774186d04ee58841e2.png](https://img-blog.csdnimg.cn/img_convert/bf7aed08f93c72774186d04ee58841e2.png)
SCSS代码
.mirror-y-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (transform: scaleY(-1)) { position: relative; &:before, &:after { display: block; content: ""; position: absolute; left: 0; right: 0; background: inherit; } &:before { top: 0; bottom: 50%; transform: scaleY(-1); } &:after { top: 50%; bottom: 0; } }}