如果我想应用像电影 The Matrix 这样的绿色比例过滤器效果，CSS 过滤器值可能是什么？答案

【问题标题】：What could be the CSS Filter Value if I want to apply Green Scale filter effect like the movie The Matrix?如果我想应用像电影 The Matrix 这样的绿色比例过滤器效果，CSS 过滤器值可能是什么？
【发布时间】：2018-02-06 10:59:48
【问题描述】：

我正在尝试应用像电影 The Matrix 那样的绿色滤镜效果。

我在 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;
}

【问题讨论】：

标签： css wordpress filter

【解决方案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>

【讨论】：

嗨，我尝试了我的图像，但它无法正常工作，因为它适用于矩阵图像。我想这是因为原始的 The Matrix 图像是蓝色的，这就是为什么 hue-rotate(300deg) 有效。我的照片是一种非常简单的自然视图，由多种颜色组合组成。这就是为什么，我首先想将所有颜色显示为一种独特的颜色（就像在矩阵中它是蓝色的），然后想应用过滤器。这可能吗？
你能提供一张照片让我看看吗？或者您也可以尝试将 300deg 更改为另一个值。
HI.. 我的图像是多种颜色的，所以我无法达到与矩阵效果完全相同的效果，但在应用 hue-rotate 120 度后，我可以达到类似的效果。跨度>