Question

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

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

如此图片所示：

enter image description here

Answer 1

这可以通过css masking完成，但不幸的是浏览器支持非常糟糕（我相信webkit）。

-webkit-mask-box-image: url(http://yourimagehere);

因为您的图像全白，所以它是遮罩的理想选择。掩模的工作方式是，无论图像是白色，原始元素都显示为正常，其中原始元素的黑色（或透明）未显示。中间的任何东西都有一定程度的透明度。

修改：

您也可以在svg的帮助下在FireFox中使用它。

http://jsfiddle.net/uw1mu81k/4/

＆＃13;
＆＃13;
div { width: 50px; height: 50px; mask: url(#mymask); -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png); }
＆＃13;
<div style="background-color: red;"></div> <div style="background-color: blue;"></div> <div style="background-color: green;"></div> <div style="background-color: orange;"></div> <div style="background-color: purple;"></div> <svg height="0" width="0"> <mask id="mymask"> <image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" /> </mask> </svg>
＆＃13;
＆＃13;
＆＃13;

Answer 2

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

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

亮度会使图像变暗，棕褐色会使其略微偏黄，饱和以增加颜色，最后调整旋转以改变颜色。但它不是跨浏览器友好的：

IE
在Chrome上，hue-rotate(25deg)会使任何图像变红，但您需要 firefox中的负值，例如hue-rotate(-25deg)让它变红。
您可以使用它来定位mozilla浏览器： https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

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

如果你有图像的svg版本，你可以将它们转换为使用此工具的字体图标https://icomoon.io/。要改变颜色，您只需要color:#f00;就像字体颜色一样。
如果您需要在悬停状态下实现此效果，请在非悬停状态下使用红色图像filter: brightness(0) invert();，在悬停状态下使用filter: brightness(1);。 Hovever这仍然不适用于IE
使用精灵表。您可以使用图像编辑工具创建自己或使用在线提供的精灵表生成器。然后，您可以使用SpriteCow获取spritesheet的每个子图像的css。

Answer 3

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

UITableView

Answer 4

我试图在@ zekkai的回答之后为我的白云图片着色，然后我写了一个过滤器生成器。

＆＃13;

var slider_huerotate = document.getElementById("slider_huerotate");
var slider_brightness = document.getElementById("slider_brightness");
var slider_saturate = document.getElementById("slider_saturate");
var slider_sepia = document.getElementById("slider_sepia");

var output = document.getElementById("demo");
var cloud =  document.getElementById('cloud');
let [brightness , sepia, saturate, huerotate] = ["100", "80", "100","360"];
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
output.innerHTML = filtercolor; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider_huerotate.oninput = function() {
huerotate = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_brightness.oninput = function() {
brightness = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_sepia.oninput = function() {
sepia = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_saturate.oninput = function() {
saturate = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

＆＃13;

.slider {
    -webkit-appearance: none;
    width: 350px;
    height: 15px;
    border-radius: 5px;   
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

img{
  width:300px;
  z-index:100;
  filter: brightness(100%) sepia(80) saturate(100) hue-rotate(360deg);
  padding:70px 25px 50px 25px;
}

.wrapper{
  width:600px;
  height:500px;
  padding:50px;
  font-size:small;
}

.slidecontainer_vertical{
    margin-top: 50px;
   transform: translate(0,300px) rotate(270deg);
  -moz-transform: rotate(270deg);

}

.left{
  width:50px;
  height:300px;
  float:left;
}

.cloud{
  width:100%;
}

.middle{
  width:350px;
  height:300px;
  float:left;
  margin:0 auto;
}

.right{
  width:50px;
  height:300px;
  float:left;
}

#demo{
  width:100%;
  text-align:center;
  padding-bottom:20px;
  font-family: 'Handlee', cursive;
  }

＆＃13;

<head>
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
</head>
<div class="wrapper">
<div class='left'>
<div class="slidecontainer_vertical">
  <input type="range" min="0" max="360" value="360" class="slider" id="slider_huerotate">
</div></div>
  <div class=middle>
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="100" class="slider" id="slider_brightness">
</div>
<div id='cloud'>
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQ36u4x5L_01bszwckr2tAGS560HJtQz4qblj0jnvFUPSgyM9DAh7z_L3mmDdF6XRgu8FkTjqJKSNBQ/pub?w=416&amp;h=288"></div>
    <div id='demo'></div>
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="80" class="slider" id="slider_sepia">
</div>
  </div>
<div class='right'>
<div class="slidecontainer_vertical">
  <input type="range" min="0" max="100" value="100" class="slider" id="slider_saturate">
</div></div>
</div>

＆＃13;

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

4 个答案: