CSS灰度过滤器将徽标更改为不同的阴影答案

【问题标题】：CSS grayscale filter changing logos to different shadesCSS灰度过滤器将徽标更改为不同的阴影
【发布时间】：2016-02-12 23:34:30
【问题描述】：

我在带有徽标的滑块上使用灰度滤镜。我希望将所有徽标过滤为相同的灰色阴影。正如您在下面看到的，根据徽标的颜色，每个都被过滤成不同的阴影。

这是我的 CSS：

section.fullwidth .carousel-exhibitors .logo-wrapper .tint img {
       position:     relative; z-index: -2; 
       filter: gray; 
       -webkit-filter: grayscale(100%); 
       -webkit-transition: all .6s ease; 
       -webkit-backface-visibility: hidden;
}

是否可以过滤所有相同的阴影？

【问题讨论】：

我不认为你可以用过滤器来做到这一点，因为过滤器总是尊重原始的差异（即原始徽标的颜色）。我认为这看起来不错，但实现您想要的最简单的方法是首先将徽标修改为相同的灰色阴影并取消过滤器（尽管我接受这可能不是您想要的或能够在你的情况下做）
是的，我试图避免这种情况，因为我在网站的多个位置使用相同的图像，并且只想在滑块中显示灰度。如果做不到，我就得处理……
只是想 - 有没有办法让图像纯黑白然后应用灰色过滤器......会挖一点
试试这个stackoverflow.com/questions/15904211/…
无论如何，最好在上传图片之前执行此操作。它节省了加载时间并且性能更好

标签： html css

【解决方案1】：

我在没有 SVG 的情况下管理它（在我指出的上一篇文章的帮助下）...

Fiddle

代码：

<img src="https://www.google.es/images/srpr/logo4w.png" class="image">

CSS：

.image {
    -webkit-filter:  grayscale(100%) brightness(60%) contrast(10000000%);
    opacity: .3;
}

不幸的是，如果您必须支持 IE，那么您仍然会获得颜色 - 它没有相当于对比度 - 我不相信，但我应该有！

回到我最初的观点 - 如果您必须支持所有（低级）浏览器，请以黑白创建副本图像并淡入灰色并首先保存图像。

【讨论】：

如果你使用filter: saturate(0%);，这在没有不透明度的情况下工作codepen.io/anon/pen/gPqxJR（第二张图片）
最佳方法，但将小提琴反转为具有不透明度的包装器，因为这是可行的方式。
顺便说一句，你根本不需要包装器，只需在 img 本身上设置不透明度。
感谢优化。时间不早了！
我不明白 opacity 的目的是什么，除非查看页面的背景颜色或背景图像？

【解决方案2】：

正如 PaulG 所说，这是不可能的，因为所有滤镜都与原始颜色相关。但是，有一个时刻：如果您的徽标是透明的（这意味着它们使用透明度而不是白色作为背景），您可以运行一个 SVG 过滤器，如下所示：

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
  <filter id="binarize">
    <feColorMatrix in="SourceGraphic"
      type="matrix"
      values="0 0 0 0 .4
              0 0 0 0 .4
              0 0 0 0 .4
              0 0 0 1 0" />
  </filter>
</defs>
</svg>

此矩阵从目标像素中消除 RGB 颜色，并将其不透明度乘以 0.4 作为新的 RGB。 40%是阴影，可以改变。可以通过将其添加到 html 和此 css 来应用此类过滤器：

filter: url(#binarize);

或者您可以将其保存到文件 binarize.svg 中：

filter: url(binarize.svg#binarize);

但是，这主要是理论上的，并非所有浏览器都支持 SVN 过滤器，当然也不是所有徽标都具有正确的透明度。例如，这是一个fiddle。如果您不使用 Mozilla，请为过滤器属性加前缀。

【讨论】：

这种方式对logo图片有太多的限制。例如，它们不能使用部分不透明度。另外，我在您的jsfiddle 中使用了另一张图片。

【解决方案3】：

您还可以查看将徽标变为黑白的 3/4 种不同方法：

滤镜：灰度（）；

混合混合模式

过滤器：网址（）； + svg（这里是饱和类型）在 css 中等于 filter: saturate(0%);

demo to play with

div {
  background: #fff;/* #000 - #fff works for blend-mode to turn gray , any other color will be used blue>blue&white */ 
}

img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  width: 30%;/* demo*/
}

img:first-of-type {
  mix-blend-mode: luminosity;
  -webkit-filter: none;
          filter: none;
}

img:last-of-type {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
}

&lt;div&gt;&lt;img src="http://www.creads.fr/blog/wp-content/uploads/2011/05/logos.jpg" /&gt;&lt;img src="http://www.creads.fr/blog/wp-content/uploads/2011/05/logos.jpg" /&gt;&lt;img src="http://www.creads.fr/blog/wp-content/uploads/2011/05/logos.jpg" /&gt;&lt;/div&gt;

【讨论】：

对我来说，没有一张照片看起来像“相同的阴影”。
@SergeSeredenko 这可能是这个想法，至少在 FF 中，SVG 是不那么“黑暗”的，在 chrome 中，它们看起来都一样。你用的是什么浏览器？（如果是 IE，算了，它只适用于 SVG ...）

【解决方案4】：

我刚刚遇到了同样的问题，并通过手动设置每个图像的 opacity（介于 0.3 和 0.7 之间）值来修复它，结果效果很好。

【讨论】：