当前位置：theitroad>有没有办法只用 CSS 为白色 PNG 图像着色？

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

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/29280817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 03:06:58 　来源:igfitidea点击:

Is there any way to colorize a white PNG image with CSS only?

csscolorscss-filters

提问by Balázs Varga

I know there are many css filters out there especially for webkit, but I can't find a solution for colorize a white (#FFFFFF) image. I've tried some combination of the filters, but none of them make my image colorized. I can only change the image in the range of grayscale, or sepia.

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

So my question is: Is there any way to change my totally white png to (for example) red using css only?

所以我的问题是：有什么方法可以仅使用 css 将我的全白 png 更改为（例如）红色？

Like shown on this image:

就像这张图片所示：

enter image description here

在此处输入图片说明

回答by James Montagne

This can be done with css masking, though unfortunately browser support is really bad (I believe webkit only).

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

http://jsfiddle.net/uw1mu81k/1/

http://jsfiddle.net/uw1mu81k/1/

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

Because your image is all white, it is a perfect candidate for masking. The way the mask works is that wherever the image is white, the original element is shown as normal, where black (or transparent) the original element is not shown. Anything in the middle has some level of transparency.

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

EDIT:

编辑：

You can also get this to work in FireFox with slight help from svg.

您也可以在svg.

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

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

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

回答by zekkai

I recently have the same question and I think this approach is worth sharing for future readers. Try this

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

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

Brightness will darken the image, sepia will make it a bit yellowish, saturate to increase the color, and lastly hue-rotate to change the color. It's not cross browser friendly though:

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

Here are some useful tips and tools that I've used when I work with images/icons using css:

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

  • If you have the svg version of the image, you can convert them to font icons using this tool https://icomoon.io/. To change color you just need color:#f00;just like font colors.
  • If you need to achieve this effect for hover state, Use red image with filter: brightness(0) invert();on NON-hover state, and filter: brightness(1);on hover state. Hovever this will still won't work on IE
  • Use sprite sheet. You can create yourself using image editing tool or use sprite sheet generators available online. Then, you can use SpriteCow to get the css for every sub-image of your spritesheet.
  • 如果您有图像的 svg 版本，则可以使用此工具https://icomoon.io/将它们转换为字体图标。要更改颜色，您只需要color:#f00;像字体颜色一样。
  • 如果您需要在悬停状态下实现此效果，请filter: brightness(0) invert();在非悬停状态和filter: brightness(1);悬停状态下使用红色图像。但是这仍然不适用于 IE
  • 使用精灵表。您可以使用图像编辑工具或使用在线提供的精灵表生成器来创建自己。然后，您可以使用 SpriteCow 为您的 spritesheet 的每个子图像获取 css。

回答by Michael Mullany

This can be done with a CSS filter that references an SVG Filter (webkit browsers + firefox). Here is the SVG filter.

这可以通过引用 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>

回答by once

i tried to color my white cloud picture following @zekkai's answer, and then i wrote a filter generator.

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

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

相关推荐

CSS 如何将 HTML 表单数据输出为 PDF？

CSS 如何将 HTML 表单数据输出为 PDF？

CSS 如何计算所需的色调旋转以生成特定颜色？

CSS 如何计算所需的色调旋转以生成特定颜色？

CSS “Segoe UI Light”字体无法在 FireFox 7 中呈现

CSS “Segoe UI Light”字体无法在 FireFox 7 中呈现

CSS 等价于 :has()

CSS 等价于 :has()

相关推荐
最近更新
标签