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

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

白天照片模拟黑夜

下面是原始图：

示意图片

代码

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>