這篇文章主要介紹“如何使用CSS實(shí)現(xiàn)簡(jiǎn)單的濾鏡效果”，在日常操作中，相信很多人在如何使用CSS實(shí)現(xiàn)簡(jiǎn)單的濾鏡效果問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何使用CSS實(shí)現(xiàn)簡(jiǎn)單的濾鏡效果”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
成都創(chuàng)新互聯(lián)公司自2013年起，先為吳橋等服務(wù)建站，吳橋等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為吳橋企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
CSS濾鏡（CSS filter）不少前端人員知道，但大多數(shù)的用法十分單一，用得最多的就是黑白應(yīng)用，其實(shí)還有很多高級(jí)的應(yīng)用，對(duì)設(shè)計(jì)師來(lái)說(shuō)也需要知道的，以后對(duì)圖片特效處理又多一種設(shè)計(jì)方案選擇了。
今天主要和大家介紹 CSSgram 這個(gè)CSS濾鏡特效庫(kù)，作者為其創(chuàng)建出很多美麗的圖像效果，并且這個(gè)CSS濾鏡庫(kù)是小于1KB，效果的實(shí)現(xiàn)方法主要使用 CSS filter 和 CSS Blen Mode（混合模式）來(lái)實(shí)現(xiàn)。
1. 簡(jiǎn)介
CSSgram是一個(gè)簡(jiǎn)單易用的CSS庫(kù)，組合CSS Filter和CSS Blend Modes實(shí)現(xiàn)的Instagram風(fēng)格的圖片濾鏡，通過(guò)在圖片上疊加顏色或漸變模擬實(shí)現(xiàn)濾鏡，可以節(jié)省大量的圖片處理時(shí)間，增加線上“玩弄”圖片的樂(lè)趣。
2. 兼容性
本庫(kù)主要基于 CSS Filters和 CSS Blend Modes，瀏覽器兼容性也主要依賴于這兩個(gè)特性。
Google Chrome: 43+
Mozilla Firefox: 38+
Opera: 32+
Safari: 8+
Internet Explorer: Nope
更多兼容性信息參見(jiàn)Can I Use。
3.使用
有兩種主要的方式使用該庫(kù)，使用CSS Classes和使用SASS @extends。
3.1 使用CSS Classes
下載CSSgram庫(kù)。
在你的項(xiàng)目中鏈接該庫(kù)。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
在你的圖片元素上添加濾鏡名字的Classes（因?yàn)楸編?kù)使用偽類選擇符實(shí)現(xiàn)濾鏡效果，所以濾鏡類需要添加到容器元素上，不能是img，最好是figure標(biāo)簽）。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
可用的濾鏡類
CSSgram提供的濾鏡類有：
Aden: class="aden"
Reyes: class="reyes"
Perpetua: class="perpetua"
Inkwell: class="inkwell"
Toaster: class="toaster"
Walden: class="walden"
Hudson: class="hudson"
Gingham: class="gingham"
Mayfair: class="mayfair"
Lo-fi: class="lofi"
X-Pro II: class="xpro2"
1977: class="_1977"
Brooklyn: class="brooklyn"
3.2 使用SASS @extends。
如果你在使用SASS，那么你可以下載本庫(kù)的scss文件，導(dǎo)入你的項(xiàng)目，然后使用繼承了。
下載scss形式的庫(kù)
在你的主要scss文件中導(dǎo)入本庫(kù)，貌似這樣@import 'vendor/cssgram';
在你需要應(yīng)用濾鏡的選擇器中使用繼承，例如@extend %aden
CSS Code復(fù)制內(nèi)容到剪貼板
// Sass
.viz--beautiful {
@extend %aden;
}
當(dāng)然，如果你只使用其中一種效果，可以僅僅下載和導(dǎo)入其中一種（例如scss/aden.scss）。
最后附上本庫(kù)的github托管地址https://github.com/una/CSSgram，希望可以對(duì)大家有所幫助。
4. 源碼解析
下面簡(jiǎn)單分析CSSgram的源碼，以Aden效果為例。
CSS Code復(fù)制內(nèi)容到剪貼板
/*
*
* Aden，aden.scss
*
*/
@import 'shared';
%aden,
.aden {
@extend %filter-base;
filter: hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);
&:after{
background: linear-gradient(to rightright, rgba(66, 10, 14, 0.2), transparent);
mix-blend-mode: darken;
}
}
其中導(dǎo)入了shared，_shared.scss源碼如下。
CSS Code復(fù)制內(nèi)容到剪貼板
%filter-base {
position: relative;
&:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0; left: 0;
position: absolute;
}
}
PS：截止目前的濾鏡效果一覽
到此，關(guān)于“如何使用CSS實(shí)現(xiàn)簡(jiǎn)單的濾鏡效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
重慶分公司
重慶分公司
