有没有办法只用 CSS 给白色 PNG 图像上色?
Is there any way to colorize a white PNG image with CSS only?
我知道有很多 css 过滤器,特别是针对 webkit,但我找不到为白色 (#FFFFFF) 图像着色的解决方案。我尝试了一些滤镜组合,但 none 使我的图像着色。我只能更改灰度范围内的图像,或棕褐色。
所以我的问题是:
有什么方法可以仅使用 css 将我全白的 png 更改为(例如)红色?
如图所示:
这可以通过 css 屏蔽来完成,但不幸的是浏览器支持真的很差(我相信只有 webkit)。
http://jsfiddle.net/uw1mu81k/1/
-webkit-mask-box-image: url(http://yourimagehere);
因为你的图像是全白的,所以它是蒙版的完美候选者。蒙版的工作方式是,无论图像是白色的,原始元素都显示为正常,黑色(或透明)的原始元素不显示。中间的任何东西都有一定程度的透明度。
编辑:
在 svg
的轻微帮助下,您也可以在 FireFox 中使用它。
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>
这可以通过引用 SVG 滤镜的 CSS 滤镜来完成。这是 SVG 滤镜(第一行值中的“1 1 1”将蓝色和绿色通道转换为红色。)
<svg width="800px" height="600px">
<filter id="redden" color-interpolation-filters="sRGB">
<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);
亮度会使图像变暗,棕褐色会使图像有点发黄,饱和会增加颜色,最后色相旋转会改变颜色。
虽然它不是跨浏览器友好的:
IE 不支持
On chrome, hue-rotate(25deg)
将使任何图像变红,但你需要
Firefox 中的负值,例如hue-rotate(-25deg)
让它变红。
您可以使用它来定位 mozilla 浏览器:
https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
以下是我在使用 css 处理 images/icons 时使用的一些有用的提示和工具:
- 如果你有图片的svg版本,你可以将它们转换成
使用此工具的字体图标 https://icomoon.io/。要更改颜色,您只需要
color:#f00;
就像字体颜色一样。
- 如果您需要在悬停状态下实现此效果,请在非悬停状态下使用红色图像
filter: brightness(0) invert();
,在悬停状态下使用 filter: brightness(1);
。但是,这仍然不适用于 IE
- 使用精灵sheet。您可以使用图像编辑工具自己创建或使用在线提供的 sprite sheet 生成器。然后,您可以使用 SpriteCow 为精灵的每个子图像获取 csssheet.
我试着按照@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\)`
// Display the default slider value
output.innerHTML = filtercolor;
// 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&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 过滤器,特别是针对 webkit,但我找不到为白色 (#FFFFFF) 图像着色的解决方案。我尝试了一些滤镜组合,但 none 使我的图像着色。我只能更改灰度范围内的图像,或棕褐色。
所以我的问题是: 有什么方法可以仅使用 css 将我全白的 png 更改为(例如)红色?
如图所示:
这可以通过 css 屏蔽来完成,但不幸的是浏览器支持真的很差(我相信只有 webkit)。
http://jsfiddle.net/uw1mu81k/1/
-webkit-mask-box-image: url(http://yourimagehere);
因为你的图像是全白的,所以它是蒙版的完美候选者。蒙版的工作方式是,无论图像是白色的,原始元素都显示为正常,黑色(或透明)的原始元素不显示。中间的任何东西都有一定程度的透明度。
编辑:
在 svg
的轻微帮助下,您也可以在 FireFox 中使用它。
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>
这可以通过引用 SVG 滤镜的 CSS 滤镜来完成。这是 SVG 滤镜(第一行值中的“1 1 1”将蓝色和绿色通道转换为红色。)
<svg width="800px" height="600px">
<filter id="redden" color-interpolation-filters="sRGB">
<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);
亮度会使图像变暗,棕褐色会使图像有点发黄,饱和会增加颜色,最后色相旋转会改变颜色。 虽然它不是跨浏览器友好的:
IE 不支持
On chrome,
hue-rotate(25deg)
将使任何图像变红,但你需要 Firefox 中的负值,例如hue-rotate(-25deg)
让它变红。
您可以使用它来定位 mozilla 浏览器: https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
以下是我在使用 css 处理 images/icons 时使用的一些有用的提示和工具:
- 如果你有图片的svg版本,你可以将它们转换成
使用此工具的字体图标 https://icomoon.io/。要更改颜色,您只需要
color:#f00;
就像字体颜色一样。 - 如果您需要在悬停状态下实现此效果,请在非悬停状态下使用红色图像
filter: brightness(0) invert();
,在悬停状态下使用filter: brightness(1);
。但是,这仍然不适用于 IE - 使用精灵sheet。您可以使用图像编辑工具自己创建或使用在线提供的 sprite sheet 生成器。然后,您可以使用 SpriteCow 为精灵的每个子图像获取 csssheet.
我试着按照@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\)`
// Display the default slider value
output.innerHTML = filtercolor;
// 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&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>