使用过滤器将css3灰色图像转换为蓝色？ [英] css3 grey image to blue color using filters?

问题描述

我正在尝试将灰色图像变成更蓝的色调，真的不知道如何为此设置滤镜或是否可能。

图像 #cacaca 中只有一种颜色，其余都是透明的。我正在尝试对同一图像进行一些叠加，以使其仅突出显示这些有色部分，而不突出透明区域。

曾经玩过其中一些但不多成功，不知道我在处理颜色时在做什么。

  .saturate {-webkit-filter：saturate（3 ）; filter：saturate（3）;} 
 .grayscale {-webkit-filter：grayscale（100％）; filter：grayscale（100％）;} 
 .contrast {-webkit-filter：对比度（160％）;过滤器：对比度（160％）；} 
 .brightness {-webkit-filter：亮度（0.25）；过滤器：亮度（0.25）；} 
 .blur {-webkit-filter：blur（3px）; filter：blur（3px）;} 
 .invert {-webkit-filter：invert（100％）; filter：invert（100％）;} 
 .sepia {-webkit-filter：sepia（100％）; filter：sepia（100％）;} 
 .huerotate {-webkit-filter：hue-rotate（180deg）; filter：hue-rotate（180deg）;} 
 .rss.opacity {-webkit-filter：opacity（50％）; filter：opacity（50％）;} 
  

解决方案

您可以使用以下组合：

• 过滤器：sepia（）


• 过滤器：hue-rotate（）


• 过滤器：saturate（）

工作示例：

< pre class = snippet-code-css lang-css prettyprint-override> img {宽度：107像素；高度：180像素；} img.filtered {过滤器：棕褐色（100％）色相旋转（190deg ）saturate（500％）;}

 < img src = https://cdn.pixabay.com/photo/2015/12/16/19/16/png-1096410_960_720.png alt =我是植物 />< img class =过滤 src = https://cdn.pixabay.com/photo/2015/12/16/19/16/png-1096410_960_720.png alt =我是植物 />  

I'm trying to get a grey image to a more blue tone, really no idea how to set the filters for this or if it's possible.

The image only has one color in #cacaca, the rest transparent. I'm trying to do some overlay with the same image so that it only highlights those colored parts and not the transparent areas.

Been playing with some of these but not much success, no idea what I'm doing when it comes to colors.

.saturate {-webkit-filter: saturate(3); filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}

解决方案

You can use a combination of:

• filter: sepia()
• filter: hue-rotate()
• filter: saturate()

Working Example:

img {
width: 107px;
height: 180px;
}

img.filtered {
filter: sepia(100%) hue-rotate(190deg) saturate(500%);
}

<img src="https://cdn.pixabay.com/photo/2015/12/16/19/16/png-1096410_960_720.png" alt="I am a plant" />

<img class="filtered" src="https://cdn.pixabay.com/photo/2015/12/16/19/16/png-1096410_960_720.png" alt="I am a plant" />

这篇关于使用过滤器将css3灰色图像转换为蓝色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！