通过CSS更改图像的颜色 [英] Change color of image via CSS

问题描述

您好我正在尝试使用css将图像更改为红色，经过努力尝试后我决定发布此问题，我希望我能通过答案学习
这就是我到目前为止所用的
https://jsfiddle.net/md1/

Hello I am trying to change image to red color using css and after trying so hard I decided to post this question and I hope that I can learn through the answer this is what I have so far https://jsfiddle.net/md1/

img {
 -webkit-filter: invert(90%); filter: invert(90%);
 }

推荐答案

你需要结合两个过滤器饱和和色调，下面是一个可能的组合来获得红色（如果你使用一种颜色）选择器它将生成默认的网络红色 - ＃FF0000 或只是＃F00 ，因为你可以选择你的红色更强或更轻。

you need to combine two filters saturate and hue, below is a possible combination to get a "red" (if you use a color picker it will generate the default web "red" - #FF0000 or just #F00, because you can choose your red, stronger or lighter.

img {
  webkit-filter: saturate(100) hue-rotate(-140deg);
  filter: saturate(100) hue-rotate(-140deg)
}

<img class="screencap" src="https://s3.amazonaws.com/r7-crawl/supremecourt/en/updated_conversations/87b5cd065b1d080f8a8c5e6ecdecb51a.png">

In据称，第一个片段是一个错误（与@kaiido ），这只是在FF中使用Windows在标签 img 中制作红色 - 同时在其他浏览器中保持粉红色其他操作系统，（因此我将在bugzilla中提交bug）

In the first snippet had, allegedly, a bug (after a chat with @kaiido), that was just making red in FF using Windows in tag img - while keeping pink in other browsers in other OSs, (therefore I'm going to file the bug in bugzilla)

所以有一种方法可以使用混合过滤器跨浏览器工作

So there is a way to do this working cross browser, using mixed filters

img {
  -webkit-filter: brightness(0.6)contrast(3.4)hue-rotate(217deg)saturate(9.9);
  filter: brightness(0.6)contrast(3.4)hue-rotate(217deg)saturate(9.9);
}

<img class="screencap" src="https://s3.amazonaws.com/r7-crawl/supremecourt/en/updated_conversations/87b5cd065b1d080f8a8c5e6ecdecb51a.png">

这篇关于通过CSS更改图像的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！