本篇文章展示了CSS制作图片滤镜效果具体操作，代码简明扼要容易理解，绝对能让你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

使用一个或多个图像相关的CSS属性（background-blend-mode, mix-blend-mode, or filter）可以实现许多特殊的图片显示效果，共列举了20种图片显示效果。

.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; }}2.2 水彩效果效果示例

.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 浮雕效果效果示例

.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 彩铅效果效果示例

.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 黑板效果效果示例

.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 彩色黑板效果效果示例

.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 喷枪效果效果示例

.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 绚烂效果效果示例

.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 绒布效果效果示例

.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 水平低墨效果示例

.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 垂直低墨效果效果示例

.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 拼贴效果效果示例

.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 马赛克效果效果示例

.mosaic-effect { $url : url(photo.jpg); background-image: $url, $url; background-size: cover, 5% 5%; background-position: center; background-blend-mode: overlay;}2.14 图片边框效果效果示例

.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 红外效果效果示例

.infrared-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; filter: hue-rotate(180deg) saturate(2);}2.16 夜视效果效果示例

.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 沃霍尔效果效果示例

.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 颜色校正效果效果示例

.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 水平镜像效果效果示例

.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 垂直镜像效果效果示例

.mirror-y-effect {

$url : url(photo.jpg);

看完这篇文章，你们学会使用CSS制作图片滤镜效果了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读。