滤镜与混合模式下的图像效果

本页效果均是混合模式加滤镜实现。

白天照片模拟黑夜

下面是原始图：

示意图片

代码

CSS代码：
.night {
    width: 256px; height: 256px;
    background: rgba(0,40,140,.6) url(./house-bed.jpg);
    background-size: 100%;
    background-blend-mode: darken;
    filter: brightness(80%) grayscale(20%) contrast(1.2);
}
HTML代码：
<div class="night"></div>

让照片更梦幻

下面是原始图片：

示意图片

代码

CSS代码：
.girl {
    width: 256px; height: 171px;
    background: rgba(238,179,163, .8) url(./mm.jpg);
    background-size: 100%;
    background-blend-mode: soft-light;
    filter: contrast(1.1);
}
HTML代码：
<div class="girl"></div>

CSSgram中的图像处理

项目地址：https://github.com/una/CSSgram

  • 原始效果
  • 1977
  • Aden
  • Brannan
  • Brooklyn
  • Clarendon
  • Earlybird
  • Gingham
  • Hudson
  • Inkwell
  • Kelvin
  • Lark
  • Lo-Fi
  • Maven
  • Mayfair
  • Moon
  • Nashville
  • Perpetua
  • Reyes
  • Rise
  • Slumber
  • Stinson
  • Toaster
  • Valencia
  • Walden
  • Willow
  • X-pro II

更高级的图像处理

下面是原始图片：

示意图片

下面展示的3个效果更适合风景照，人物效果欠佳。

参考自：https://bennettfeely.com/image-effects/

素描

CSS代码：
.sketch {
    width: 256px; height: 192px;
    background: url(./example.jpg) -2px -2px, url(./example.jpg);
    background-size: 258px 194px;
    background-blend-mode: difference;
    filter: brightness(3) invert(1) grayscale(1);
}
HTML代码：
<div class="sketch"></div>

水彩

CSS代码：
.watercolor {
    width: 256px; height: 192px;
    position: relative;
    overflow: hidden;
}
.watercolor::before {
    content: '';
    display: block;
    height: inherit;
    background: url(./example.jpg) -2px -2px, url(./example.jpg);
    background-size: 100%;
    background-blend-mode: difference;
    filter: brightness(2) invert(1) grayscale(1);
}
.watercolor::after {
    content: '';
    position: absolute; left: 0; top: 0;
    height: inherit; width: inherit;
    background: url(./example.jpg) -1px -1px;
    background-size: 100%;
    mix-blend-mode: multiply;
    filter: brightness(1.3) blur(2px) contrast(2);
}
HTML代码：
<div class="watercolor"></div>

彩铅

CSS代码：
.pencil {
    width: 256px; height: 192px;
    position: relative;
    overflow: hidden;
}
.pencil::before {
    content: '';
    display: block;
    height: inherit;
    background: url(./example.jpg) -1px -1px, url(./example.jpg);
    background-size: calc(100% + 1px);
    background-blend-mode: difference;
    filter: brightness(2) invert(1) grayscale(1);
}
.pencil::after {
    content: '';
    position: absolute; left: 0; top: 0;
    height: inherit; width: inherit;
    background: url(./example.jpg);
    background-size: 100%;
}
HTML代码：
<div class="pencil"></div>