如果我想像电影《黑客帝国》那样应用绿标滤镜效果，CSS滤镜值是多少

Question

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

我在CSS中进行了以下过滤器属性组合，但仍然没有得到确切的东西。

有人能帮我吗？

矩阵的原始图像：和矩阵的绿色滤波器图像：-

以下是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>