小技巧！CSS 提取圖片主題色功能探索

本文將介紹一種利用 CSS 獲取圖片主題色的小技巧。一塊兒看看~

背景

原由是微信技術羣裏有個同窗發問，有什麼方法可以獲取圖片的主色呢？有一張圖片，獲取他的主色調：

利用獲取到的這個顏色值，來實現相似這樣的功能 -- 容器中有一張圖片，但願背景色能夠適配圖片的主色，像是這樣：

你們出謀劃策，有說利用 Canvas 進行計算的，有推薦專門的開源庫的，都挺好。

那麼，利用 CSS，能不能實現這個功能呢？

聽起來好像有點癡人說夢，CSS 還能實現這個效果？emm，利用 CSS 確實能夠經過一種討巧的方式，近似的獲取到圖片的主色調，在對主色的要求不是特別精確的狀況下，不失爲一種辦法，下面一塊兒來一探究竟。

利用 filter: blur() 及 transform: sacle() 獲取圖片主題色

這裏，咱們利用模糊濾鏡以及放大效果，能夠近似的拿到圖片的主題色。

假定咱們有這樣一張圖片：

<div></div>

利用模糊濾鏡做用給圖片：

div {
    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
    background-size: cover;
    filter: blur(50px);
}

看看效果，咱們經過比較大的一個模糊濾鏡，將圖片 blur(50px)，模糊以後的圖片有點那感受了，不過存在一些模糊邊緣，嘗試利用 overflow 進行裁剪。

接下來，咱們須要去掉模糊的邊邊，以及經過 transform: scale() 放大效果，將顏色再聚焦下，稍微改造下代碼：

div {
    position: relative;
    width: 320px;
    height: 200px;
    overflow: hidden;
}

div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
    background-size: cover;
    // 核心代碼：
    filter: blur(50px);
    transform: scale(3);
}

結果以下：

這樣，咱們就利用 CSS，拿到了圖片的主色調，而且效果仍是不錯的！

完整的代碼你能夠戳這裏：CodePen Demo -- Get the main color of the image by filter and scale

不足之處

固然，該方案也是存在必定的小問題的：

1. 只能是大體拿到圖片的主色調，沒法很是精確，而且 filter: blur(50px) 這個 50px 須要進行必定的調試
2. 模糊濾鏡自己是比較消耗性能的，若是一個頁面存在多個這種方法獲取到的背景，可能對性能會形成必定的影響，實際使用的時候須要進行必定的取捨

最後

好了，本文到此結束，介紹了一種利用 CSS 獲取圖片主題色的小技巧，但願對你有幫助 :)

感謝提出介紹這種方法的閱文的同窗 -- XboxYan，iCSS 微信羣很是活躍，彙集了一幫 CSS 大佬，想進羣一塊兒討論技術的同窗能夠加我微信 coco1s（由於羣超過了 200 人，不能掃碼進羣，只能邀請了）

想 Get 到最有意思的 CSS 資訊，千萬不要錯過個人公衆號 -- iCSS前端趣聞 😄

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。