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

时间 2020-05-25

标签 css3 css 如何小汽车换个背景谈起栏目 CSS 繁體版

原文原文链接

css3 的魅力，不容小觑。曾经被她折服，再度回首，依旧拜倒在她的石榴裙下。相信在将来，她仍然魅力依旧。javascript

站在巨人的肩上学习，不断提高自身实力。css

用 CSS 和颜色选择工具更改图片中的颜色，即如何给小汽车换个背景色。原文地址： 12个使人惊叹的CSS实验项目html

主要代码展现：java

html：css3

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

css3：git

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 实现的。github

对 css3 的颜色混合模式 mix-blend-mode 进行深刻了解，参考谈谈一些有趣的CSS题目（十七）-- 难以想象的颜色混合模式 mix-blend-mode 。segmentfault

mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。混合模式最多见于 photoshop 中，是 PS 中十分强大的功能之一。该文还覆盖了不少案例。svg

跟着该文，还学习了不少，好比：wordpress

该文做者的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/)。好比：