說起濾鏡可能大家首先想到的就是PhotoShop 之類的製圖軟體，透過這類軟體的濾鏡可以對圖片進行美化。而在CSS 中，我們無需借助任何軟體也可以實現許多濾鏡效果，例如模糊效果、透明效果、色彩反差調整、色彩反相等等。另外，透過CSS 中的濾鏡還能對網頁中的元素或影片進行處理。本篇我們就來學習CSS 中濾鏡的使用。
CSS 中實現濾鏡效果需要透過filter 屬性
並且配合一些函數來實現，如下所示：
舉例：
<!DOCTYPEhtml><html><head><style>div{width:200px;height:200px;float:left;position:relative;}divspan{position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);color:white;text-shadow:1 px1px2pxblack;}img{width:100%;}divimg.blur{filter:blur(4px);}divimg.brightness{filter:brightness (250%);}divimg.contrast{filter:contrast(180%);}divimg.grayscale{filter:grayscale(100%);}divimg.h uerotate{filter:hue-rotate(180deg);}divimg.invert{filter:invert(100%);}divimg.opacity{filter:opacity(50%);}divimg.saturate{filter:saturate(7);} divimg.sepia{filter:sepia(100%);}divimg.shadow{f ilter:drop-shadow(8px8px10pxgreen);}</style></head><body><div><imgsrc=./scenery.jpgalt=tulip><span>原始影像</span></div><div ><imgclass=blursrc=./scenery.jpgalt=tulip><span>blur(4px)</span></div><d iv><imgclass=brightnesssrc=./scenery.jpgalt=tulip><span>brightness(250%)</span></div><div><imgclass=contrastsrc=./scenery.jpgalt=tulip><span> contrast(180%)</span></div><div><imgclass=grayscal esrc=./scenery.jpgalt=tulip><span>grayscale(100%)</span></div><div><imgclass=huerotatesrc=./scenery.jpgalt=tulip><span>hue-rotate(180deg )</span></div><div><imgclass=invertsrc=./scenery.jpgalt= tulip><span>invert(100%)</span></div><div><imgclass=opacitysrc=./scenery.jpgalt=tulip><span>opacity(50%)</span></div> <div><imgclass=saturatesrc=./scenery.jpgalt=tulip><span>saturate(7)</span> </div><div><imgclass=sepiasrc=./scenery.jpgalt=tulip><span>sepia(100%)</span></div><div><imgclass=shadowsrc=./scenery.jpgalt= tulip><span>drop-shadow(8px8px10pxgreen)</span></div></body></html>風景圖片：
運行結果：
