中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何利用CSS獲取圖片主題色

發布時間:2021-09-15 17:28:12 來源:億速云 閱讀:265 作者:小新 欄目:web開發

這篇文章將為大家詳細講解有關如何利用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-2.jpg?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-2.jpg?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]

不足之處

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

  1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

  2. 只能是大致拿到圖片的主色調,無法非常精確,并且 filter: blur(50px) 這個 50px 需要進行一定的調試

  3. 模糊濾鏡本身是比較消耗性能的,如果一個頁面存在多個這種方法獲取到的背景,可能對性能會造成一定的影響,實際使用的時候需要進行一定的取舍

關于“如何利用CSS獲取圖片主題色”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

木兰县| 正宁县| 巫溪县| 和龙市| 洛宁县| 南平市| 新疆| 陇西县| 濮阳县| 陵水| 南昌市| 米泉市| 绍兴市| 云南省| 繁峙县| 武陟县| 剑川县| 报价| 邯郸县| 广安市| 云林县| 迁西县| 东兰县| 敖汉旗| 延寿县| 曲阳县| 青海省| 甘孜县| 宁乡县| 昔阳县| 桃园县| 滁州市| 固原市| 桦川县| 巩留县| 抚顺市| 若尔盖县| 调兵山市| 册亨县| 玛多县| 准格尔旗|