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 中十分强大的功能之一。该文还覆盖了很多案例。

跟着该文，还学习了很多，比如：

该文作者的github：chokcoco/iCSS，上面关于css3等知识也是很多，能深入学习很多。

关于图片变色，在张鑫旭的博客中包好了很多。主要利用的都是 css 的 filter 属性。

本文的案例用 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>

关于颜色的文章：

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

posted @ 2019-02-18 18:42  ESnail  阅读(696)  评论(0)  编辑  收藏  举报