css3 奇技淫巧 - 如何给小汽车换个背景色谈起

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下的渐变文字效果实现
• 5分钟快速了解下CSS4 color-adjust属性

ps：css3 的深入学习，张鑫旭的博客，是个学习的好地方，总能学习到很多有用的、有趣的知识，真的是收益颇丰。“CSS相关”目录存档](https://www.zhangxinxu.com/wordpress/category/css/)。比如：

• CSS3 filter:drop-shadow滤镜与box-shadow区别应用
• 常见的CSS图形绘制合集
• 小tips: 纯CSS实现打字动画效果
• CSS3 animation属性中的steps功能符深入介绍
• ...