你值得了解的一種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-你值得了解的一種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

##不足之處

當然，該方案也是存在一定的小問題的：

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

最後

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

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

作者：chokcoco

更多程式相關知識，請訪問：

編程視頻！ ！

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