CSS也可以處理圖片效果了喲
在大家的印象中，處理影象效果這都是UI的工作，一想起影象處理想到的就是photoshop（妹子們腦海中閃過的肯定是美顏相機，連我自己寫到這的時候都腦海中都小閃了一下呢(๑¯ิε ¯ิ๑) ）之類的軟體來完成，吶隨著CSS技術的發展瀏覽器的更新，前端工作人員也能做一些影象處理了喲ψ(｀∇´)ψ~
那麼，在這個月黑風高的夜裡，本帥小姐姐就跟大家聊聊如何用css來處理影象效果。
處理影象效果分很多種：
改變影象大小：使用CSS的width和height或者使用CSS的transform中的scale
改變影象形狀：使用CSS的transform中的skew
改變影象位置：使用CSS的position或者transform中的rotate、translate
裁剪影象：使用CSS的clip（現在該屬性已被clip-path取代）
改變影象透明度：使用CSS的opacity
恩，大家看完上面那幾個transform屬性的時候是不是想，這算哪門子處理影象效果，爸爸剛接觸C3的時候就知道（用過）這玩應了好嘛，打住！大家不要誤會，還沒有進入正題，下面看看我能不能摻雜著用本命顏文字的程式碼來征服泥萌
我們玩過PS的都知道，有一個處理影象產生不同顏色效果的功能，裡面有什麼過濾啦，五十度灰啦（並不是⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄），反色啦之類的效果，這種功能是處理影象效果的利器，我們稱之為疊加模式，那麼問題來了，在web中如何使用css屬性來實現類似效果呢？
另外，這裡不會闡述如何使用這些屬性，如果你從未接觸過這方面內容，建議小碎步走向下面這兩扇藍色的門：
CSS Fliter的是種特效
高階CSS filters
༼´´◓ɷ◔`༽ ，
當然沒事沒有的，因為我還沒寫啊哈哈哈哈哈哈，明天白天寫吧。
CSS濾鏡
CSS提供了一種濾鏡特性，這種特效能幫助我們處理影象效果，比如：改變影象色值、亮度、飽和度….
ヾ( )ノ゛天ヾ( °д)ノ゛旋ヾ(°д°)ノ゛地ヾ(д° )ノ゛轉ヾ( )
那麼，謎題揭曉~~~~
ヾ( )ノ゛天ヾ( °д)ノ゛旋ヾ(°д°)ノ゛地ヾ(д° )ノ゛轉ヾ( )
CSS濾鏡規範中的filter屬性，就可以實現各種不同效果啦，當然除了filter之外，還有一個backdrop-filter屬性，成為高階濾鏡
CSS混合模式
在CSSzhong ,除了使用濾鏡效果可以幫助我們處理影象之外，還有一個類似於PS的圖層混合模式特性，稱之為CSS混合模式。
CSS混合模式，提供了:
background-blend-mode （背景元素圖片）
mix-blend-mode（類似於filter用於img元素上）
isolation（隔離元素）
三個屬性
CSS怎麼處理影象效果呢（到重點了嗎:(´ཀ`」 ∠)….）
圖片素材：
啊~(❁´▽`❁)好喜歡白髮小姐姐~~~（圖片來自微博）
mix-blend-mode
那mix, 恩，可能是該屬性不僅可以作用於HTML，還可以作用於SVG，乾脆叫mix一起捋過來。該CSS屬性作用是讓元素內容和這個元素的背景以及下面的元素髮生“混合”。
相容性：
可見，最近的Chrome以及FireFox瀏覽器都已經支援良好，而且無需使用私有字首。
其支援的值很多，中英文對照如下：
mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片疊底
mix-blend-mode: screen; //濾色
mix-blend-mode: overlay; //疊加
mix-blend-mode: darken; //變暗
mix-blend-mode: lighten; //變亮
mix-blend-mode: color-dodge; //顏色減淡
mix-blend-mode: color-burn; //顏色加深
mix-blend-mode: hard-light; //強光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //飽和度
mix-blend-mode: color; //顏色
mix-blend-mode: luminosity; //亮度
mix-blend-mode: initial; //初始
mix-blend-mode: inherit; //繼承
mix-blend-mode: unset; //復原下面簡單看幾個小例旬：
HTML結構：
<div class="olala">
<img src="zero/69b5364djw1ejziho8h7vj20ox15otlj.jpg" alt="">
</div>CSS部分
.olala{
background-image:url(zero/69b5364djw1ejyid1nz20j20rt15ok5m.jpg);
background-size:cover;
background-position:center;
}
.olala img {
mix-blend-mode: multiply;
}影象效果：
.olala{
background-image:url(zero/69b5364djw1ejyid1nz20j20rt15ok5m.jpg);
background-size:cover;
background-position:center;
}
.olala img {
mix-blend-mode: hue;
}
大家慢慢試，下一個：
background-blend-mode
這個要更好理解一點，背景的混合模式。
可以是背景圖片間的混合，也可以是背景圖片和背景色的混合。
相容性同上
因為程式碼比較少，我就整段粘了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.olala{
width:100%;
height:400px;
background: url(zero/1.jpg) no-repeat center, url(zero/2.jpg) no-repeat center;
background-blend-mode: color-dodge;
}
</style>
</head>
<body>
<div class="olala"></div>
</body>
</html>效果：
filter
filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。
語法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.olala img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%)
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
</style>
</head>
<body>
<div class="olala">
<img src="zero/69b5364djw1ejziho8h7vj20ox15otlj.jpg" alt="">
</div>
</body>
</html>效果圖：
好啦，困啦，睡啦，明天繼續詳細部分咯~
看我瘋狂顏文字
（╯－＿－）╯╧╧
滅哈，夠瘋狂吧，哼，一個足矣！！！安啦~