Question

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

图片只有#cacaca中的一种颜色，其余颜色是透明的。我正在尝试使用相同的图像进行一些叠加，以便它只突出显示那些彩色部分而不是透明区域。

一直在玩这些但没有太大的成功，不知道我在做什么颜色时做的。

.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%);}

Answer 1

您可以使用以下组合：

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

工作示例：

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" />

Answer 2

可以通过SVG滤镜活板门直接设置颜色。

img {
width: 107px;
height: 180px;
}

img.filtered {
filter: url(#blue-wash);
}

<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" />

<svg>
<filter id="blue-wash">
<feColorMatrix type="matrix" values="0.2 0.2 0.2 0 0   0.3 0.3 0.3 0 0  1 1 1 0 0  0 0 0 1 0"/>
</filter>
</svg>

css3灰色图像使用滤镜的蓝色？

2 个答案: