小技巧！CSS 提取圖片主題色功能探索
本文將介紹一種利用 CSS 獲取圖片主題色的小技巧。一起看看~
背景
起因是微信技術(shù)群里有個(gè)同學(xué)發(fā)問(wèn)，有什么方法能夠獲取圖片的主色呢?有一張圖片，獲取他的主色調(diào)：
利用獲取到的這個(gè)顏色值，來(lái)實(shí)現(xiàn)類(lèi)似這樣的功能 -- 容器中有一張圖片，希望背景色可以適配圖片的主色，像是這樣：
大家出謀劃策，有說(shuō)利用 Canvas 進(jìn)行計(jì)算的，有推薦專門(mén)的開(kāi)源庫(kù)的，都挺好。
那么，利用 CSS，能不能實(shí)現(xiàn)這個(gè)功能呢?
聽(tīng)起來(lái)好像有點(diǎn)癡人說(shuō)夢(mèng)，CSS 還能實(shí)現(xiàn)這個(gè)效果?emm，利用 CSS 確實(shí)可以通過(guò)一種討巧的方式，近似的獲取到圖片的主色調(diào)，在對(duì)主色的要求不是特別精確的情況下，不失為一種辦法，下面一起來(lái)一探究竟。
利用 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);
- }
看看效果，我們通過(guò)比較大的一個(gè)模糊濾鏡，將圖片 blur(50px)，模糊之后的圖片有點(diǎn)那感覺(jué)了，不過(guò)存在一些模糊邊緣，嘗試?yán)?overflow 進(jìn)行裁剪。
接下來(lái)，我們需要去掉模糊的邊邊，以及通過(guò) 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);
- }
結(jié)果如下：
這樣，我們就利用 CSS，拿到了圖片的主色調(diào)，并且效果還是不錯(cuò)的!
完整的代碼你可以戳這里：CodePen Demo -- Get the main color of the image by filter and scale[1]
不足之處
當(dāng)然，該方案也是存在一定的小問(wèn)題的：
- 只能是大致拿到圖片的主色調(diào)，無(wú)法非常精確，并且 filter: blur(50px) 這個(gè) 50px 需要進(jìn)行一定的調(diào)試
- 模糊濾鏡本身是比較消耗性能的，如果一個(gè)頁(yè)面存在多個(gè)這種方法獲取到的背景，可能對(duì)性能會(huì)造成一定的影響，實(shí)際使用的時(shí)候需要進(jìn)行一定的取舍
最后
好了，本文到此結(jié)束，介紹了一種利用 CSS 獲取圖片主題色的小技巧，希望對(duì)你有幫助 :)
參考資料
[1]CodePen Demo -- Get the main color of the image by filter and scale:
https://codepen.io/Chokcoco/pen/poRBQGg
