這篇文章跟大家分享一個利用 CSS 取得圖片主題色的小技巧。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
起因是微信技術群組裡有同學發問,有什麼方法能夠取得圖片的主色呢?有一張圖片,取得他的主色調:
利用取得到的這個顏色值,來實現類似這樣的功能-- 容器中有一張圖片,希望背景色可以適配圖片的主色,像是這樣:
大家出謀劃策,有說利用Canvas 進行計算的,有推薦專門的開源庫的,都挺好。
那麼,利用 CSS,能不能實現這個功能呢?
聽起來好像有點癡人說夢,CSS 還能達到這個效果? emm,利用 CSS 確實可以透過一種討巧的方式,近似的獲取到圖片的主色調,在對主色的要求不是特別精確的情況下,不失為一種辦法,下面一起來一探究竟。
這裡,我們利用模糊濾鏡以及放大效果,可以近似的拿到圖片的主題色。
假定我們有這樣一張圖片:
<div></div>
利用模糊濾鏡作用給圖片:
div { background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-你值得了解的一種CSS獲取圖片主題色的小技巧(分享)?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-你值得了解的一種CSS獲取圖片主題色的小技巧(分享)?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
##不足之處當然,該方案也是存在一定的小問題的: 這個
50px 需要進行一定的調試
原文網址:https://segmentfault.com/a/1190000039979112作者:chokcoco更多程式相關知識,請訪問:
編程視頻! !
以上是你值得了解的一種CSS獲取圖片主題色的小技巧(分享)的詳細內容。更多資訊請關注PHP中文網其他相關文章!