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

Question

我在滑块上使用灰度滤镜，其中包含徽标。我希望将所有徽标过滤为相同的灰色阴影。如您所见，根据徽标的颜色，每个都会被过滤到不同的阴影。

这是我的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;
}

是否可以将它们全部过滤掉？

Answer 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，那么你仍然会得到颜色 - 它没有相当于对比 - 我不相信它，但我应该有！

回到我原来的观点 - 如果你必须支持所有（低级）浏览器，请用黑白创建复制图像并淡化为灰色并首先保存这些图像。

Answer 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，前缀过滤器属性。

Answer 3

你也可以用3/4种不同的方式将你的徽标变为黑白：

  

过滤器：灰度（）;

     

混合 - 混合模式

     

滤波器：URL（）; + 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");
}

<div><img src="http://www.creads.fr/blog/wp-content/uploads/2011/05/logos.jpg" /><img src="http://www.creads.fr/blog/wp-content/uploads/2011/05/logos.jpg" /><img src="http://www.creads.fr/blog/wp-content/uploads/2011/05/logos.jpg" /></div>

Answer 4

我只是遇到了同样的问题，并通过手动设置每个图像的opacity（在0.3到0.7之间）来解决它，最终效果很好。