有没有办法只使用CSS为白色PNG图像着色？

我知道有很多css过滤器，特别是针对webkit的，但我找不到一个白色（#FFFFFF）图像着色的解决方案。我尝试了一些滤镜的组合，但并没有一个能使我的图像彩色化。我只能在灰度或深褐色范围内更改图像

所以我的问题是： 有没有办法只使用css将我的全白色png更改为（例如）红色

如图所示：

---

这可以通过css屏蔽来实现，但不幸的是浏览器支持非常糟糕（我相信只有webkit）

因为你的图像是全白色的，所以它是掩蔽的完美候选。遮罩的工作方式是，无论图像是白色的，原始元素都显示为正常，而黑色（或透明）的原始元素不显示。中间的任何东西都有一定的透明度。

编辑：

您还可以在FireFox中通过

svg

获得一些帮助

div{
宽度：50px；
高度：50px；
掩码：url（#mymask）；
-webkit掩码框图像：url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png);
}

---

这可以通过引用SVG过滤器（webkit浏览器+firefox）的CSS过滤器来完成。这是SVG过滤器

<svg width="800px" height="600px">
  <filter id="redden">
    <feColorMatrix type="matrix" values="1 1 1 0 0 
                                         0 0 0 0 0 
                                         0 0 0 0 0 
                                         0 0 0 1 0"/>
  </filter>

<image filter="url(#redden)" width="190" height="400" preserveAspectRatio="xMinYMin slice"  xlink:href="http://i.stack.imgur.com/e6MUC.jpg"/>
</svg>

---

我最近也有同样的问题，我认为这种方法值得未来的读者分享。 试试这个

亮度会使图像变暗，深褐色会使图像变黄，饱和以增加颜色，最后色调旋转以改变颜色。 但它对跨浏览器不友好：

• IE不支持它

• 在chrome上，

  色调旋转（25度）

  将使任何图像变为红色，但您需要 firefox中的负值，例如，

  色调旋转（-25度）

  使其变为红色
  您可以使用此选项以mozilla浏览器为目标：

以下是我使用css处理图像/图标时使用的一些有用提示和工具：

• 如果您有svg版本的图像，可以将其转换为 字体图标使用此工具。要更改颜色，只需

  color:#f00就像字体颜色一样

• 如果需要在悬停状态下实现此效果，请使用带有

  filter:brightness（0）invert（）的红色图像处于非悬停状态，并且<代码>过滤器：亮度（1）处于悬停状态。无论如何，这在IE上仍然不起作用

• 使用雪碧表。您可以使用图像编辑工具创建自己，也可以使用在线提供的sprite图纸生成器。然后，您可以使用SpriteCow为spritesheet的每个子图像获取css

---

我试着按照@zekkai的答案给我的白云图片上色，然后我写了一个过滤器生成器

var slider\u huerotate=document.getElementById（“slider\u huerotate”）；
var slider_brightness=document.getElementById（“slider_brightness”）；
var slider_saturate=document.getElementById（“slider_saturate”）；
var slider_sepia=document.getElementById（“slider_sepia”）；
var输出=document.getElementById（“演示”）；
var cloud=document.getElementById（'cloud'）；
让[亮度，乌贼墨，饱和，黄酸]=[“100”，“80”，“100”，“360”]；
var filtercolor=`BRIGHT\（${BRIGHT}%\）sepia\（${sepia}\）饱和\（${SETARTATE}\）色调旋转\（${HUEROATE}度\）`
output.innerHTML=filtercolor；//显示默认滑块值
//更新当前滑块值（每次拖动滑块控制柄时）
slider_huerotate.oninput=函数（）{
huerotate=此值；
var filtercolor=`BRIGHT\（${BRIGHT}%\）sepia\（${sepia}\）饱和\（${SETARTATE}\）色调旋转\（${HUEROATE}度\）`
cloud.style.filter=filtercolor；
output.innerHTML=filtercolor；
}
slider_brightness.oninput=函数（）{
亮度=该值；
var filtercolor=`BRIGHT\（${BRIGHT}%\）sepia\（${sepia}\）饱和\（${SETARTATE}\）色调旋转\（${HUEROATE}度\）`
cloud.style.filter=filtercolor；
output.innerHTML=filtercolor；
}
slider_sepia.oninput=函数（）{
乌贼墨=该值；
var filtercolor=`BRIGHT\（${BRIGHT}%\）sepia\（${sepia}\）饱和\（${SETARTATE}\）色调旋转\（${HUEROATE}度\）`
cloud.style.filter=filtercolor；
output.innerHTML=filtercolor；
}
滑块_saturate.oninput=函数（）{
饱和=该值；
var filtercolor=`BRIGHT\（${BRIGHT}%\）sepia\（${sepia}\）饱和\（${SETARTATE}\）色调旋转\（${HUEROATE}度\）`
cloud.style.filter=filtercolor；
output.innerHTML=filtercolor；
}

滑块{
-webkit外观：无；
宽度：350px；
高度：15px；
边界半径：5px；
背景#d3；
大纲：无；
不透明度：0.7；
-webkit转换：.2s；
转变：不透明度；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：25px；
高度：25px；
边界半径：50%；
背景#4CAF50；
光标：指针；
}
.滑块：：-moz范围拇指{
宽度：25px；
高度：25px；
边界半径：50%；
背景#4CAF50；
光标：指针；
}
img{
宽度：300px；
z指数：100；
滤光片：亮度（100%）深褐色（80）饱和（100）色调旋转（360度）；
填充：70px 25px 50px 25px；
}
.包装纸{
宽度：600px；
高度：500px；
填充：50px；
字体大小：小；
}
.slidecontainer_垂直{
边缘顶部：50px；
变换：平移（0300px）旋转（270度）；
-moz变换：旋转（270度）；
}
.左{
宽度：50px；
高度：300px；
浮动：左；
}
.云{
宽度：100%；
}
.中{
宽度：350px；
高度：300px；
浮动：左；
保证金：0自动；
}
.对{
宽度：50px；
高度：300px；
浮动：左；
}
#演示{
宽度：100%；
文本对齐：居中；
垫底：20px；
字体系列：“Handlee”，草书；
}

---

你能用颜色代替黑/白/灰吗？如果是这样，那么你可以使用色调旋转来改变颜色。我知道

<svg width="800px" height="600px">
  <filter id="redden">
    <feColorMatrix type="matrix" values="1 1 1 0 0 
                                         0 0 0 0 0 
                                         0 0 0 0 0 
                                         0 0 0 1 0"/>
  </filter>

<image filter="url(#redden)" width="190" height="400" preserveAspectRatio="xMinYMin slice"  xlink:href="http://i.stack.imgur.com/e6MUC.jpg"/>
</svg>

filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg);