利用CSS改變圖片顏色的100種方法！

Keven 發(fā)布于2019-08-02 16:06 / 3343人閱讀

摘要：前言說到對圖片進行處理，我們經(jīng)常會想到這類的圖像處理工具。或者是的時候，對圖片的對比度，陰影進行處理。過濾器通常被用于調整圖片，背景和邊界的渲染。最后，安利我們的公眾號前端指南。

前言

“說到對圖片進行處理，我們經(jīng)常會想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者，我們經(jīng)常會需要處理一些特效，例如根據(jù)不同的狀態(tài)，讓圖標顯示不同的顏色。或者是hover的時候，對圖片的對比度，陰影進行處理。”

你以為這些是經(jīng)過PS軟件處理出來的？不不不，純粹的是用css寫出來的，很神奇把。

強大的 CSS:filter

CSS濾鏡（filter）屬提供的圖形特效，像模糊，銳化或元素變色。過濾器通常被用于調整圖片，背景和邊界的渲染。 MDN

CSS標準里包含了一些已實現(xiàn)預定義效果的函數(shù)。

filter: none        
    | blur() 
    | brightness() 
    | contrast() 
    | drop-shadow() 
    | grayscale() 
    | hue-rotate() 
    | invert() 
    | opacity() 
    | saturate() 
    | sepia() 
    | url();

通過雙通道我們可以的到一些非常炫酷的PS效果

當然，在這里，只是舉個例子，通過配置矩陣中的值，我們可以配置每一個像素點的值按照我們定義的規(guī)則顯示

我們在這里詳細講一下feColorMatrix 矩陣的計算方式

其中Rin Gin Bin a(alpha) 為原始圖片中每個像素點的rgba值

通過矩陣計算，得到的Rout Gout Bout Aout就是最終顯示出來的rgba值。

將圖片轉為單色拿棕色rgba(140,59,0,1)作為例子

根據(jù)上面的公式，我們可以簡化一些計算，同一行中，只設置一個通道的值，其他通道為0

不難得出矩陣

0 0 0 0 目標值R
0 0 0 0 目標值G
0 0 0 0 目標值B
0 0 0 0 1

根據(jù)規(guī)則，只需要計算，255/想要顯示的顏色對應通道 = 目標值

我們想要的棕色rgba(140,59,0,1) 換算成色板 rgba 為 140 59 0 255

可以算出目標值

0 0 0 0 0.55
0 0 0 0 0.23
0 0 0 0 0 
0 0 0 0 1

多通道設置出炫酷的效果來

就如同之前我們看到的雙通道形成的炫酷圖片一般

我們今天要把圖片的飽和度提高，該怎麼做呢？首先當然是想想飽和度的成因，就是紅的越紅，藍的越藍，綠的越綠，由這個成因出發(fā)，我們的矩陣就可以寫成下面的樣子，看到矩陣當中出現(xiàn)了 3 和 -1，一定會很那悶這是怎麼來的，箇中原理其實很容易理解，讓我們假設某一個像素的 RGB 分別是 (200/255),(100/255),(50/255)，呈現(xiàn)的應該是有點暗沉的橘色，經(jīng)過矩陣的換算，R 變成了 200/255x3-100/255-50/255= 1.76, G 變成 200/255x(-1)+100/255*3-50/255=0.2，B 變成 200x(-1)+100x(-1)+50x3=-0.59，因此 RGB 轉換後就是：200x1.76,100x0.2,50x-0.5。SVG 研究之路 (11) - filter:feColorMatrix

其他方案

除了feColorMatrix svg濾鏡還有很多的方法可以定義濾鏡，他們同樣可以作用到圖片上。由于篇幅限制，這里就不詳細展開了

總結

css3提供了filter這個屬性，使得通過前端技術實現(xiàn)更多炫酷的特效成為了可能

依賴于svg的濾鏡，我們可以實現(xiàn)復雜的濾鏡效果

注意

css：filter與ie上的filter并不是相同的概念

css:filter在不同的瀏覽器上兼容性不一樣，您在使用的時候需要注意瀏覽器的兼容性

參考文獻

SVG 研究之路 (11) - filter:feColorMatrix

css:filter MDN

Color Filters Can Turn Your Gray Skies Blue

PNG格式小圖標的CSS任意顏色賦色技術

寫在最后

本次源碼我已經(jīng)放在了codePen上 https://codepen.io/nanhupatar... 歡迎查看

文章難免會有疏漏，希望大家能夠指正批評。如果您覺得本文對您有幫助，請點個贊支持作者。

最后，安利我們的公眾號：前端指南。致力于前端技術分享，精品文章，深度好文，同時也歡迎您給我們投稿，本公眾號用戶留存率95%哦，對了，更新時間是每天早上六點

轉載請注明出處與作者，原創(chuàng)不易，歡迎轉載

云服務器 GPU云服務器改變背景顏色圖片的顏色處理在家賺錢的十種方法數(shù)據(jù)遷移的四種方法

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/54664.html

利用CSS改變圖片顏色的100種方法！

摘要：前言說到對圖片進行處理，我們經(jīng)常會想到這類的圖像處理工具。或者是的時候，對圖片的對比度，陰影進行處理。過濾器通常被用于調整圖片，背景和邊界的渲染。最后，安利我們的公眾號前端指南。前言說到對圖片進行處理，我們經(jīng)常會想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者，我們經(jīng)常會需要處理一些特效，例如根據(jù)不同的狀態(tài)，讓圖標顯示不同的顏色。或者是hover的時候，對圖片的對比度，陰影...

pinecone 2019-08-30 15:54 評論0 收藏0
CSS學習筆記

CSS學習筆記在學習CSS的過程中做的一些記錄，用于未來的快速回憶。 HTML常見元素和理解 head中的元素指定字符集 meta name=viewport content=...定義視圖大小與設備屏幕大小的比例，用戶是否可縮放指定基準路徑 body中的元素 a[href, target] img[src, alt] table td[colspan, rowspan] for...

bawn 2019-08-29 17:27 評論0 收藏0
web前端（11）—— 頁面布局1

摘要：維護起來更加方便不足雪碧的最大問題是內存使用拼圖維護比較麻煩使的編寫變得困難雪碧調用的圖片不能被打印我們可以使用綜合屬性制作通天，什么是通天呢，就是一般我們電腦的屏幕都是但是設計師給我們的圖都會比這個大，那么我們可以此屬性來制作通天。要說頁面布局的話，那就必須說說margin，padding，和background。這三個屬性其實都是前面講過的，這里還是再次講解以下，為什么呢？因為是這樣的...

番茄西紅柿 2019-04-23 13:11 評論0 收藏0
聊聊網(wǎng)頁中的圖片

摘要：使用的場景多為頁面內容的圖片，較大的頭圖，顏色過多的圖片。就是頁面中的背景，并不是內容，修飾作用。 warn: 這是一篇沒有一張圖片的講圖片的文章 1. 圖片格式通常在網(wǎng)頁中使用的圖片有三種格式，jpg，png和gif。jpg是有損壓縮格式，就算你在ps里用100%質量保存，保存多次會產(chǎn)生質量損失，而png和gif則不會。因此如果開發(fā)者相對圖片進行微處理，改動jpg不是明智的選擇。p...

Meathill 2019-08-28 18:18 評論0 收藏0