使用CSS改變圖片顏色的100種方法(值得收藏)

2024-07-11 08:59:38

字體：大中小

來源：轉載

供稿：網友

前言

“說到對圖片進行處理，我們經常會想到PhotoShop這類的圖像處理工具。作為前端開發者，我們經常會需要處理一些特效，例如根據不同的狀態，讓圖標顯示不同的顏色?；蛘呤莌over的時候，對圖片的對比度，陰影進行處理。”

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

強大的 CSS:filter

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

CSS標準里包含了一些已實現預定義效果的函數。

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

filter: none

沒有任何效果，默認filter就為none

filter:blur( ) 高斯模糊

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

我們來嘗試一下

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

brightness(%) 線性乘法

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

img {filter:brightness(70%);}

contrast(%) 對比度

調整圖像的對比度。

img {    filter:contrast(50%);}

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

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

利用這個方案，我們其實改變類似于一些圖標的顏色，比如黑色的圖標變成藍色的圖標。

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

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

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

hue-rotate(deg) 色相旋轉

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

看，我的小姐姐變成了阿凡達！

invert(%) 反轉

這個函數的作用是反轉輸入圖像，有點像曝光的效果

img {    filter:invert(100%)}

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

這個效果可以將圖片做舊，有一種時代滄桑感。喜歡古風的人一定會喜歡上這個效果的

img {    filter:grayscale(80%);}

除了古風還有一種用法是有的時候需要將全站變成灰色，如大屠殺紀念日的時候。

可以這樣設置

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

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

下面給我的小姐姐一個暖暖的色調。

img {    filter:sepia(50%)}

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

沒錯，因為我想把這個內容放到最后來說，filter:url()就是css濾鏡改變圖片的終極方法。CSS:filter可以導入一個svg濾鏡，作為他自己的濾鏡。

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

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

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

如果我們可以改變每個通道的值是不是就能完美的得到我們想要的任意顏色了呢，原理上，我們可以像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效果

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

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

其中Rin Gi

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

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

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

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

不難得出矩陣

0 0 0 0 目標值R0 0 0 0 目標值G0 0 0 0 目標值B0 0 0 0 1

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

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

可以算出目標值

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

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

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

我亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb