css3 的魅力，不容小覷。曾經被她折服，再度回首，依舊拜倒在她的石榴裙下。相信在未來，她仍然魅力依舊。

站在巨人的肩上學習，不斷提升自身實力。

用 CSS 和顏色選擇工具更改圖片中的顏色，即如何給小汽車換個背景色。原文地址：12個令人驚嘆的CSS實驗項目

主要代碼展示：

html：

<input type="color" value="#0000ff">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/9284591662_38b0438418_h.jpg">
 

css3：

html, body { height: 100%; }
body { margin: 0; }

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

input { 
    /* removes default styling from input color element */
    padding: 0;
    border: none; 
    /* makes input (color swatch) 100% size of container */
    position: absolute;
    width: 100%; 
    height: 100%;
    /* mix blend mode makes the color of the swatch alter the image behind it. */
    mix-blend-mode: hue; /* try screen, multiply or other blend modes for different effects */
    cursor: pointer;
}
 

實現很簡單，就是利用 css 的一個特性：mix-blend-mode: bue 實現的。

對 css3 的顏色混合模式 mix-blend-mode 進行深入了解，參考 談談一些有趣的CSS題目（十七）-- 不可思議的顏色混合模式 mix-blend-mode 。

mix-blend-mode 描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合。混合模式最常見於 photoshop 中，是 PS 中十分強大的功能之一。該文還覆蓋了很多案例。

跟著該文，還學習了很多，比如：

• 談談一些有趣的CSS題目（一）-- 左邊豎條的實現方法
• 談談一些有趣的CSS題目（四）-- 從倒影說起，談談 CSS 繼承 inherit
• 談談一些有趣的CSS題目（十五）-- 談談 CSS 關鍵字 initial、inherit 和 unset
• 【CSS進階】box-shadow 與 filter:drop-shadow 詳解及奇技淫巧
• ...

該文作者的github：chokcoco/iCSS，上面關於css3等知識也是很多，能深入學習很多。

關於圖片變色，在張鑫旭的博客中包好了很多。主要利用的都是 css 的 filter 屬性。

• 純CSS實現任意格式圖標變色的研究
• CSS filter:hue-rotate色調旋轉濾鏡實現按鈕批量生產
• PNG格式小圖標的CSS任意顏色賦色技術

本文的案例用 css3 的 filter: hue-rotate(220deg) 也能實現換個背景色。

<style>
  .box img {
       width: 300px; 
       height: 168px;
       filter: hue-rotate(220deg);
  }
</style>
<div class="box">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/9284591662_38b0438418_h.jpg">
</div>

關於顏色的文章：

• CSS前景背景自動配色技術簡介
• CSS改變插入光標顏色caret-color簡介及其它變色方法
• 3種純CSS實現中間鏤空的12色彩虹漸變圓環方法
• CSS1-CSS3 顏色知識知多少？
• currentColor-CSS3超高校級好用CSS變量
• JS HEX十六進制與RGB, HSL顏色的相互轉換
• 小tip: 使用CSS將圖片轉換成黑白(灰色、置灰)
• 使用CSS3 ::selection偽元素改變文本選中顏色
• 小tip:CSS3下的漸變文字效果實現

ps：css3 的深入學習，張鑫旭的博客，是個學習的好地方，總能學習到很多有用的、有趣的知識，真的是收益頗豐。“CSS相關”目錄存檔](https://www.zhangxinxu.com/wordpress/category/css/)。比如：

• CSS3 filter:drop-shadow濾鏡與box-shadow區別應用
• 常見的CSS圖形繪制合集
• 小tips: 純CSS實現打字動畫效果
• CSS3 animation屬性中的steps功能符深入介紹
• ...

css3 奇技淫巧 - 如何給小汽車換個背景色談起