首頁  >  文章  >  web前端  >  你值得了解的一種CSS獲取圖片主題色的小技巧(分享)

你值得了解的一種CSS獲取圖片主題色的小技巧(分享)

青灯夜游
青灯夜游轉載
2021-06-03 11:13:023302瀏覽

這篇文章跟大家分享一個利用 CSS 取得圖片主題色的小技巧。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

你值得了解的一種CSS獲取圖片主題色的小技巧(分享)

背景

起因是微信技術群組裡有同學發問,有什麼方法能夠取得圖片的主色呢?有一張圖片,取得他的主色調:

你值得了解的一種CSS獲取圖片主題色的小技巧(分享)

利用取得到的這個顏色值,來實現類似這樣的功能-- 容器中有一張圖片,希望背景色可以適配圖片的主色,像是這樣:

你值得了解的一種CSS獲取圖片主題色的小技巧(分享)

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

那麼,利用 CSS,能不能實現這個功能呢?

聽起來好像有點癡人說夢,CSS 還能達到這個效果? emm,利用 CSS 確實可以透過一種討巧的方式,近似的獲取到圖片的主色調,在對主色的要求不是特別精確的情況下,不失為一種辦法,下面一起來一探究竟。

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

這裡,我們利用模糊濾鏡以及放大效果,可以近似的拿到圖片的主題色。

假定我們有這樣一張圖片:

你值得了解的一種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 進行裁剪。

你值得了解的一種CSS獲取圖片主題色的小技巧(分享)

接下來,我們需要去掉模糊的邊邊,以及透過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獲取圖片主題色的小技巧(分享)

這樣,我們就利用CSS,拿到了圖片的主色調,並且效果還是不錯的!

完整的程式碼你可以戳這裡:CodePen Demo -- Get  the main color of the image by filter and scale

##不足之處

當然,該方案也是存在一定的小問題的:

    只能是大致拿到圖片的主色調,無法非常精確,並且
  1. filter: blur(50px) 這個50px 需要進行一定的調試
  2. 模糊濾鏡本身是比較消耗性能的,如果一個頁面存在多個這種方法獲取到的背景,可能對性能會造成一定的影響,實際使用的時候需要進行一定的取捨
最後

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

原文網址:https://segmentfault.com/a/1190000039979112

作者:chokcoco

更多程式相關知識,請訪問:

編程視頻! !

以上是你值得了解的一種CSS獲取圖片主題色的小技巧(分享)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除