CSS3改变图片的颜色(附gif图及源码)

此项目主要是运用混合模式中的色相来完成图片的变色效果的
首先简单讲一下色相：色彩的相貌，如下图的颜色

通过在颜色板添加混合模式为色相样式，然后通过改变颜色板的颜色使车身部分的颜色改变，因为除了车身，其他部分的颜色为黑白，所以没有随着变色

下面是html代码，一个颜色板color和一个img车的图片，然后设置默认色板颜色为#0000ff（蓝色）

	<input type="color" value="#0000ff">
    <img src="car.jpg">

然后颜色板color添加混合模式设置为色相（mix-blend-mode: hue;），使用绝对定位铺满（宽100%，高：100%），然后从输入颜色元素中移除默认样式
下面是css代码

html,
body {
    height: 100%;
}
body {
    margin: 0;
}
img {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    /* 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。 */
    object-fit: cover;
}
input {
    padding: 0;
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
    /*混合模式使色块的颜色改变其背后的图像*/
    mix-blend-mode: hue;
    cursor: pointer;
}
/* 从输入颜色元素中移除默认样式*/
::-webkit-color-swatch {
    border: none;
}
::-webkit-color-swatch-wrapper {
    padding: 0;
}
::-moz-color-swatch,
::-moz-focus-inner {
    border: none;
}
::-moz-focus-inner {
    padding: 0;
}

此项目来源于英文原文 | 12 Incredible Pure CSS Experiments
作者 | Brenda Stokes Barron
源码：https://codepen.io/noahblon/pen/ZbjmbK