CSS灰度过滤器将徽标更改为不同深浅

我在具有徽标的滑块上使用灰度过滤器。我希望所有的标志都被过滤到相同的灰色。正如您在下面看到的，根据徽标的颜色，每个徽标都会被过滤为不同的阴影。CSS灰度过滤器将徽标更改为不同深浅

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

是否有可能对其进行过滤所有相同的浓淡？

来源

2016-02-12 user2977729

我不认为你可以用过滤器做到这一点，因为过滤器始终尊重原始版本（即原始徽标的颜色）的差异。我认为这看起来相当不错，但实现你想要的最简单的方法是首先将徽标修改为相同的灰色阴影，并取消过滤器（尽管我接受可能不是你想要的或能够在你的情况下做） – PaulG

是啊，我想避免这种情况，因为我在我的网站上的多个地方使用相同的图像，只想在滑块中具有灰度。如果它不能完成，我将不得不处理... – user2977729

只是想 - 是否有一种方法使图像纯黑色/然后应用灰色过滤器...将挖掘一点 – PaulG

等于我管理它（与前一后的帮助我指指）无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浏览器，那么你仍然要得到的颜色 - 它没有一个相当于对比 - 这不是我不相信，但我应该拥有！

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

来源

2016-02-13 01:10:12 PaulG

如果你使用'filter：saturate（0％）;'，这个工程没有不透明性http://codepen.io/anon/pen/gPqxJR（second图像） –

最好的办法，但扭转不透明的包装，因为这是工作方式。 –

顺便说一句，你根本不需要包装器，只需在'img'本身设置不透明度即可。 –

正如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，前缀为的过滤属性。

来源

2016-02-13 00:48:25

该方法需要对徽标图像进行太多限制。例如，他们不能使用部分不透明度。另外，我在[jsfiddle]（https://jsfiddle.net/gstzk7fe/）中使用了另一张图片。 –

你可以看看，还有，那些3/4不同的方式把黑色和白色的标志：

过滤器：灰阶（）;

混合混合模式

filter：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>

来源

2016-02-13 01:07:55

没有一张照片看起来像“同样的阴影”。 –

@SergeSeredenko这可能就是这个想法，在FF中，SVG是不太“黑暗”的，在铬中，它们看起来都是一样的。你使用了什么浏览器？（如果IE，忘记它，它只适用于SVG ...） –

CSS灰度过滤器将徽标更改为不同深浅

回答

相关问题