如何使用CSS改變圖片顏色-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)如何使用CSS改變圖片顏色，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司企業(yè)建站,10年網(wǎng)站建設(shè)經(jīng)驗(yàn)，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營經(jīng)驗(yàn)，設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對于網(wǎng)站建設(shè)、成都做網(wǎng)站中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動的思維在網(wǎng)頁中充分展現(xiàn)，通過對客戶行業(yè)精準(zhǔn)市場調(diào)研，為客戶提供的解決方案。

前言

“說到對圖片進(jìn)行處理，我們經(jīng)常會想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者，我們經(jīng)常會需要處理一些特效，例如根據(jù)不同的狀態(tài)，讓圖標(biāo)顯示不同的顏色?；蛘呤莌over的時(shí)候，對圖片的對比度，陰影進(jìn)行處理?！?/p>

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

強(qiáng)大的 CSS:filter

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

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

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

filter: none

沒有任何效果，默認(rèn)filter就為none

filter:blur( ) 高斯模糊

給圖像一個(gè)高斯模糊效果，length值越大，圖像越模糊

我們來嘗試一下

img 
{    
filter:blur(2px);;
}

brightness(%) 線性乘法

可以讓圖片看起來更亮或者更暗

img {
filter:brightness(70%);
}

contrast(%) 對比度

調(diào)整圖像的對比度。

img 
{    
filter:contrast(50%);
}

drop-shadow(h-shadow v-shadow blur spread color)

給圖像設(shè)置一個(gè)陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數(shù)接受<shadow>(在CSS3背景中定義)類型的值，除了”inset”關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速

利用這個(gè)方案，我們其實(shí)改變類似于一些圖標(biāo)的顏色，比如黑色的圖標(biāo)變成藍(lán)色的圖標(biāo)。

PNG格式小圖標(biāo)的CSS任意顏色賦色技術(shù)

img 
{    
filter: drop-shadow(705px 0 0 #ccc);
}

在這里，我們將圖片投影形成一個(gè)同等大小的灰色區(qū)域。

hue-rotate(deg) 色相旋轉(zhuǎn)

img {    
filter:hue-rotate(70deg);
}

看，我的小姐姐變成了阿凡達(dá)！

invert(%) 反轉(zhuǎn)

這個(gè)函數(shù)的作用是反轉(zhuǎn)輸入圖像，有點(diǎn)像曝光的效果

img 
{   
 filter:invert(100%)
}

grayscale(%) 將圖像轉(zhuǎn)換為灰度圖像

這個(gè)效果可以將圖片做舊，有一種時(shí)代滄桑感。喜歡古風(fēng)的人一定會喜歡上這個(gè)效果的

img 
{    
filter:grayscale(80%);
}

除了古風(fēng)還有一種用法是有的時(shí)候需要將全站變成灰色，如大屠殺紀(jì)念日的時(shí)候。

可以這樣設(shè)置

*{    
filter: grayscale(100%);   
 -webkit-filter: grayscale(100%);   
 -moz-filter: grayscale(100%);    
-ms-filter: grayscale(100%);   
 -o-filter: grayscale(100%);
}

  sepia(%) 將圖像轉(zhuǎn)換為深褐色

下面給我的小姐姐一個(gè)暖暖的色調(diào)。

img 
{   
 filter:sepia(50%)
}

大家是不是發(fā)現(xiàn)我并沒有把url()方法寫到這上面來

沒錯(cuò)，因?yàn)槲蚁氚堰@個(gè)內(nèi)容放到最后來說，filter:url()就是css濾鏡改變圖片的終極方法。CSS:filter可以導(dǎo)入一個(gè)svg濾鏡，作為他自己的濾鏡。

終極變色解決方案！ filter:url();

為什么說filter:url()是圖片變色的終極解決方案呢，請容我慢慢道來。

我們先科普一下PS的工作原理，我們都知道網(wǎng)頁是有三原色的R(紅) G(綠) B(藍(lán))，常見的RGBA還包括一個(gè)opicity值，而opcity值是根據(jù)alpha通道計(jì)算出來的。也就是說，我們見到的網(wǎng)頁的每一個(gè)像素點(diǎn)都是由紅藍(lán)綠再加alpha四個(gè)通道組成，每一個(gè)通道我們稱之為色板，PS中的8位板的意思就是2的八次方256，意思就是每一個(gè)通道的取值范圍都是(0-255) &ndash;SVG 研究之路 (11) &ndash; filter:feColorMatrix

如果我們可以改變每個(gè)通道的值是不是就能完美的得到我們想要的任意顏色了呢，原理上，我們可以像ps那樣利用svg濾鏡得到任何我們想要的圖像，不僅僅是變色。我們甚至可以憑空生成一幅圖像。

svg feColorMatrix大法好

<svg height="0" xmlns="http://www.w3.org/2000/svg">  
  <defs>        
<filter id="change">               
 <feColorMatrix type="matrix" values="               
 0 0 0 0 0.55               
 0 0 0 0 0.23                
 0 0 0 0 0                
 0 0 0 0 1" />     
   </filter>   
 </defs></svg>
<img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="">
img
 {   
 filter:url(#change);}

通過單通道我們可以將圖片變成單一的顏色

<svg height="0" xmlns="http://www.w3.org/2000/svg">    
<defs>       
 <filter id="change">               
<feColorMatrix values="3 -1 -1 0 0                       -1 3 -1 0 0                       -1 -1 3 0 0                       0 0 0 1 0" />        </filter>    
</defs>
</svg>

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

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

我們在這里詳細(xì)講一下feColorMatrix 矩陣的計(jì)算方式

其中Rin Gi

n Bin a(alpha) 為原始圖片中每個(gè)像素點(diǎn)的rgba值

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

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

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

不難得出矩陣

0 0 0 0 目標(biāo)值R0 0 0 0 目標(biāo)值G0 0 0 0 目標(biāo)值B0 0 0 0 1

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

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

可以算出目標(biāo)值

0 0 0 0 0.550 0 0 0 0.230 0 0 0 0 0 0 0 0 1

多通道設(shè)置出炫酷的效果來

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

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

<svg height="0" xmlns="http://www.w3.org/2000/svg">    
<defs>       
 <filter id="change">             
  <feColorMatrix values="3 -1 -1 0 0                       -1 3 -1 0 0                       -1 -1 3 0 0           
            0 0 0 1 0" />       
 </filter>    
</defs>
</svg>

其他方案

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

總結(jié) css3提供了filter這個(gè)屬性，使得通過前端技術(shù)實(shí)現(xiàn)更多炫酷的特效成為了可能 依賴于svg的濾鏡，我們可以實(shí)現(xiàn)復(fù)雜的濾鏡效果 注意 css：filter與ie上的filter并不是相同的概念 css:filter在不同的瀏覽器上兼容性不一樣，您在使用的時(shí)候需要注意瀏覽器的兼容性

關(guān)于“如何使用CSS改變圖片顏色”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

當(dāng)前名稱：如何使用CSS改變圖片顏色-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://muchs.cn/article8/djgjip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站營銷、域名注冊、全網(wǎng)營銷推廣、微信小程序、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)