css - 如果我想像电影 The Matrix 一样应用 Green Scale 滤镜效果，CSS Filter Value 可能是什么？

Question

我正在尝试应用像电影黑客帝国那样的绿色滤镜效果。

我在 CSS 中做了以下过滤器属性组合，但仍然没有得到确切的结果。

谁能帮帮我？

Original Image of The Matrix :和 Green Filter Image of The Matrix :-

CSS代码如下

.class-name img {
    -webkit-filter: grayscale(100%) sepia(100%) brightness(100%) contrast(140%) saturate(80%) hue-rotate(90deg) opacity(100%);
    filter: grayscale(100%) sepia(100%) brightness(100%) contrast(140%) saturate(80%) hue-rotate(90deg) opacity(100%);
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
} 

.class-name img:hover {
    -webkit-filter: grayscale(0%) sepia(0%) brightness(100%) contrast(100%) saturate(100%) hue-rotate(0deg) opacity(100%);
    filter: grayscale(0%) sepia(0%) brightness(100%) contrast(100%) saturate(100%) hue-rotate(0deg) opacity(100%);
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

Answer 1

您可以使用 filter: hue-rotate(300deg); 来改变颜色并赋予图像与矩阵图像类似的效果。希望对您有所帮助!

img {
    filter: hue-rotate(300deg);
}

<section>
  <img src="https://s3-us-west-2.amazonaws.com/flx-editorial-wordpress/wp-content/uploads/2017/03/17123153/The-Matrix.jpg">
</section>