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/)。好比：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。