CSS技巧之——將圖片變成黑白

.filter{
filter: grayscale(100%);
/*濾鏡屬性中用grayscale(灰度值)可以將圖片轉(zhuǎn)換為黑白*/
}

相信大家都會(huì)覺(jué)得自己的網(wǎng)頁(yè)很無(wú)聊，千篇一律吧。這里介紹一下CSS的一個(gè)小技巧，可以將圖片轉(zhuǎn)換成黑白的效果。

你只需要在你的CSS樣式表文件里，為你想要轉(zhuǎn)換的圖像增加一條filter的屬性就可以了。其中的grayscale是可以生成一種灰度值介于0~1之間的效果，具體的使用方法如下：

.filter{
filter: grayscale(100%);//100%表示完全轉(zhuǎn)換，0%表示不轉(zhuǎn)換
}

執(zhí)行一下這段代碼，你會(huì)發(fā)現(xiàn)彩色的圖片已經(jīng)變成了黑白的，是不是非常容易呢？

還有，在一些需要大量展示圖片的網(wǎng)站或電商網(wǎng)站上也很常用， 圖像矢量化已成為當(dāng)今Web和手機(jī)應(yīng)用頁(yè)面設(shè)計(jì)的主流。使用SVG或FontAwesome、Bootstrap Glyphicon等矢量圖標(biāo)庫(kù)的絕佳效果，responsive設(shè)計(jì)的必須品，可以幫助我們省去很多補(bǔ)全或遮蓋的麻煩。

希望大家都能利用這個(gè)小技巧豐富你們的網(wǎng)站吧！