本文將介紹一種利用 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
不足之處
當然，該方案也是存在一定的小問題的：
- 只能是大致拿到圖片的主色調，無法非常精確，并且
filter: blur(50px)這個50px需要進行一定的除錯 - 模糊濾鏡本身是比較消耗性能的，如果一個頁面存在多個這種方法獲取到的背景，可能對性能會造成一定的影響，實際使用的時候需要進行一定的取舍
最后
好了，本文到此結束，介紹了一種利用 CSS 獲取圖片主題色的小技巧，希望對你有幫助 ??
感謝提出介紹這種方法的閱文的同學 -- XboxYan，iCSS 微信群非常活躍，聚集了一幫 CSS 大佬，想進群一起討論技術的同學可以加我微信 coco1s（因為群超過了 200 人，不能掃碼進群，只能邀請了）
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏，
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285909.html
標籤：Html/Css
上一篇：Django——form表單