起因是微信技術(shù)群里有個(gè)同學(xué)發(fā)問,有什么方法能夠獲取圖片的主色呢?有一張圖片,獲取他的主色調(diào):
利用獲取到的這個(gè)顏色值,來實(shí)現(xiàn)類似這樣的功能 -- 容器中有一張圖片,希望背景色可以適配圖片的主色,像是這樣:
大家出謀劃策,有說利用 Canvas 進(jìn)行計(jì)算的,有推薦專門的開源庫的,都挺好。
那么,利用 CSS,能不能實(shí)現(xiàn)這個(gè)功能呢?
聽起來好像有點(diǎn)癡人說夢(mèng),CSS 還能實(shí)現(xiàn)這個(gè)效果?emm,利用 CSS 確實(shí)可以通過一種討巧的方式,近似的獲取到圖片的主色調(diào),在對(duì)主色的要求不是特別精確的情況下,不失為一種辦法,下面一起來一探究竟。
利用 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); }
看看效果,我們通過比較大的一個(gè)模糊濾鏡,將圖片 blur(50px)
,模糊之后的圖片有點(diǎn)那感覺了,不過存在一些模糊邊緣,嘗試?yán)?overflow
進(jìn)行裁剪。
接下來,我們需要去掉模糊的邊邊,以及通過 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
當(dāng)然,該方案也是存在一定的小問題的:
只能是大致拿到圖片的主色調(diào),無法非常精確,并且 filter: blur(50px)
這個(gè) 50px
需要進(jìn)行一定的調(diào)試模糊濾鏡本身是比較消耗性能的,如果一個(gè)頁面存在多個(gè)這種方法獲取到的背景,可能對(duì)性能會(huì)造成一定的影響,實(shí)際使用的時(shí)候需要進(jìn)行一定的取舍
好了,本文到此結(jié)束,介紹了一種利用 CSS 獲取圖片主題色的小技巧,希望對(duì)你有幫助 😃
感謝提出介紹這種方法的閱文的同學(xué) -- XboxYan,iCSS 微信群非常活躍,聚集了一幫 CSS 大佬,想進(jìn)群一起討論技術(shù)的同學(xué)可以加我微信 coco1s(因?yàn)槿撼^了 200 人,不能掃碼進(jìn)群,只能邀請(qǐng)了)
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ,持續(xù)更新,歡迎點(diǎn)個(gè) star 訂閱收藏。
到此這篇關(guān)于解析CSS 提取圖片主題色功能的文章就介紹到這了,更多相關(guān)CSS 提取圖片主題色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
標(biāo)簽:保定 萍鄉(xiāng) 延邊 大同 赤峰 泰州 林芝 巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《解析CSS 提取圖片主題色功能(小技巧)》,本文關(guān)鍵詞 ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。