用CSS新属性实现特殊的图片显示效果

1 概述

1.1 前言

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

详细代码及英文原文请访问Bennett Feely的主页。

2 效果列表

2.1 铅笔画效果

效果示例

铅笔画效果

SCSS代码

查看示例程序

2.2 水彩效果

效果示例

水彩效果

SCSS代码

查看示例程序

2.3 浮雕效果

效果示例

浮雕效果

SCSS代码

查看示例程序

2.4 彩铅效果

效果示例

彩铅效果

SCSS代码

查看示例程序

2.5 黑板效果

效果示例

黑板效果

SCSS代码

查看示例程序

2.6 彩色黑板效果

效果示例

彩色黑板效果

SCSS代码

查看示例程序

2.7 喷枪效果

效果示例

喷枪效果

SCSS代码

查看示例程序

2.8 绚烂效果

效果示例

绚烂效果

SCSS代码

查看示例程序

2.9 绒布效果

效果示例

绒布效果

SCSS代码

查看示例程序

2.10 水平低墨

效果示例

水平低墨

SCSS代码

查看示例程序

2.11 垂直低墨效果

效果示例

垂直低墨效果

SCSS代码

查看示例程序

2.12 拼贴效果

效果示例

拼贴效果

SCSS代码

查看示例程序

2.13 马赛克效果

效果示例

马赛克效果

SCSS代码

查看示例程序

2.14 图片边框效果

效果示例

图片边框效果

SCSS代码

查看示例程序

2.15 红外效果

效果示例

红外效果

SCSS代码

查看示例程序

2.16 夜视效果

效果示例

夜视效果

SCSS代码

查看示例程序

2.17 沃霍尔效果

效果示例

沃霍尔效果

SCSS代码

查看示例程序

2.18 颜色校正效果

效果示例

颜色校正效果

SCSS代码

查看示例程序

2.19 水平镜像效果

效果示例

水平镜像效果

SCSS代码

查看示例程序

2.20 垂直镜像效果

效果示例

垂直镜像效果

SCSS代码

查看示例程序

3 结尾

3.1 结语

详细代码及英文原文请访问Bennett Feely的主页。

本文转载自Bennett Feely的个人网站，只做学习和交流使用。