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