整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者 | 小胡
責編 | 郭芮
說到圖片處理，我們經常會想到PhotoShop這類的圖像處理工具。作為前端開發者，我們經常會需要處理一些特效，例如根據不同的狀態，讓圖標顯示不同的顏色。或者是hover的時候，對圖片的對比度，陰影進行處理。”
不過你以為上面的圖片都是經過PS軟件處理出來的？不不不，純粹是用CSS寫出來的，很神奇吧。
CSS濾鏡（filter）能夠提供模糊、銳化或元素變色等圖形特效，過濾器則通常用于調整圖片、背景和邊界的渲染。
CSS標準里包含了一些已實現預定義效果的函數：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
<!--html--> <img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="原圖">
filter: none
沒有任何效果，默認filter就為none。
filter:blur( ) 高斯模糊
給圖像一個高斯模糊效果，length值越大，圖像越模糊。我們來嘗試一下：
img {
filter:blur(2px);;
}
brightness(%) 線性乘法
可以讓圖片看起來更亮或者更暗：
img {
filter:brightness(70%);
}
contrast(%) 對比度
調整圖像的對比度：
img {
filter:contrast(50%);
}
設置陰影效果(h-shadow v-shadow blur spread color)
陰影是合成在圖像下面、有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似，不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。
利用這個方案，我們可以改變圖標的顏色，比如黑色圖標變成藍色圖標：
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()是圖片變色的終極解決方案？請容我慢慢道來。
我們先科普一下PS的工作原理，我們都知道網頁是有三原色的R(紅) G(綠) B(藍)，常見的RGBA還包括一個opicity值，而opcity值是根據alpha通道計算出來的。也就是說，我們見到的網頁的每一個像素點都是由紅藍綠再加alpha四個通道組成，每一個通道我們稱之為色板，PS中8位板的意思就是2的八次方256，意思就是每一個通道的取值范圍都是(0-255)。
如果我們可以改變每個通道的值是不是就能完美的得到我們想要的任意顏色了呢？原理上，我們可以像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 Gin Bin a(alpha) 為原始圖片中每個像素點的rgba值，通過矩陣計算，得到的Rout Gout Bout Aout就是最終顯示出來的rgba值。
將圖片轉為單色，以棕色rgba(140,59,0,1)為例
根據上面的公式，我們可以簡化一些計算，同一行中，只設置一個通道的值，其他通道為0。不難得出矩陣：
0 0 0 0 目標值R 0 0 0 0 目標值G 0 0 0 0 目標值B 0 0 0 0 1
根據規則，只需要計算，255/想要顯示的顏色對應通道=目標值，我們想要的棕色rgba(140,59,0,1) 換算成色板 rgba 為 140 59 0 255，可以算出目標值0 0 0 0 0.55。
0 0 0 0 0.55 0 0 0 0 0.23 0 0 0 0 0 0 0 0 0 1
多通道設置出來的炫酷效果
就如同之前我們看到的雙通道形成的炫酷圖片一般。
要把圖片的飽和度提高，首先當然是想想飽和度的成因，就是紅的越紅，藍的越藍，綠的越綠。由這個成因出發，我們的矩陣就可以寫成下面的樣子，看到矩陣當中出現了3 和-1，一定會很那悶這是怎么來的，原理其實很容易理解，讓我們假設某一個像素的RGB 分別是(200/255),(100/255),(50/255)，呈現的應該是有點暗沉的橘色，經過矩陣的換算：
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 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濾鏡還有很多的方法可以定義濾鏡，它們同樣可以作用到圖片上。由于篇幅限制，這里就不詳細展開了。
CSS3提供了filter這個屬性，使得通過前端技術實現更多炫酷的特效成為了可能；依賴于svg的濾鏡，我們可以實現復雜的濾鏡效果。
但是要注意：
文章難免會有疏漏，歡迎大家指正批評。
作者：小胡，曉教育前端，開源愛好者。
聲明：本文為作者投稿，版權歸其個人所有。
單隔行變色:
<html>
<head>
<meta charset="utf-8">
<title>表單隔行變色</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1');
//alert(oTab.rows.length);
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
if(i%2)
{
oTab.tBodies[0].rows[i].style.background='';
}
else
{
oTab.tBodies[0].rows[i].style.background='#CCC';
}
}
};
</script>
</head>
<body>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>張三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>張偉</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>
表格隔行變色和鼠標移入高亮
到題目是不是嚇了一跳？css竟然還有這個操作？還真是第一次聽說~
原理嘛，其實很簡單的，用到的就是 CSS3 濾鏡filter中的drop-shadow，該濾鏡可以給圖片非透明區域添加投影。你可以理解為下圖
它實現的效果看上去就像使原來的對象離開頁面，然后在頁面上顯示出該對象的投影。是有一點類似box-shadow，但是二者還是有顯著差別的，我后面會寫一篇專門的文章來比較二者的差別。
先來看一下語法：
filter:drop-shadow(水平陰影偏移距離 垂直陰影偏移距離 投射的陰影顏色 );
我們準備一張背景色是透明的圖片(圖片尺寸40px X 40px)，
用一個div將該圖片包裹住，給圖片添加
filter: drop-shadow(40px 40px yellow)
這段代碼，代表投射出一個和該圖片一樣的形狀，
三個參數分別代表：
水平向右移動40px，
垂直向下移動40px，
投射出的形狀顏色為黃色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width: 40px;
height: 40px;
border: 1px solid red;
margin: 200px auto;
}
.pic{
filter: drop-shadow(40px 40px yellow);
}
</style>
</head>
<body>
<div class="box">
<img src="img/delete.png" class="pic"/>
</div>
</body>
</html>效果為
接下來我們稍微更改一下原代碼，將原圖設置在div外部并隱藏，變色后的投影放置在div中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width: 40px;
height: 40px;
border: 1px solid red;
margin: 200px auto;
text-indent: -40px;
overflow: hidden;
}
.pic{
filter: drop-shadow(40px 0px yellow);
}
</style>
</head>
<body>
<div class="box">
<img src="img/delete.png" class="pic"/>
</div>
</body>
</html>
如果想換成其他顏色，直接更改第三個參數就Ok了~是不是很簡單
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
