滤镜Filters的十种特殊效果

来源：互联网发布：销售软件免费版编辑：程序博客网时间：2024/05/16 07:41

在日常的css图片样式处理上经常会遇到一些图片细微的模糊、透明、光亮、阴影等效果，下列我们将依此对其进行罗列使用方法。

实现如下图所示的效果：

滤镜Filters的十种特殊效果

一、grayscale灰度

.grayscale{-webkit-filter:grayscale(1);}

二、sepia褐色、复古

.sepia{-webkit-filter:sepia(1);}

三、saturate饱和度

.saturate{-webkit-filter:saturate(0.5);}

四、hue-rotate色相旋转

.hue-rotate{-webkit-filter:hue-rotate(90deg);}

五、invert反色

.invert{-webkit-filter:invert(1);}

六、opacity透明度

.opacity{-webkit-filter:opacity(.2);}

七、brightness亮度

.brightness{-webkit-filter:brightness(.5);}

八、contrast对比度

.contrast{-webkit-filter:contrast(2);}

九、blur模糊

.blur{-webkit-filter:blur(3px);}

十、drop-shadow阴影

.drop-shadow{-webkit-filter:drop-shadow(5px 5px 5px #ccc);}

源码：

<!doctype html><html><head><meta charset="UTF-8"><title>滤镜Filters</title><style>.index h1 {text-align: center;}.index img {width: 384px;height: 100px;}.box-l {float: left;width: 50%;height: auto;}.box-r {position: fixed;top: 75px;right: 0;width: 40%;height: auto;}.box-r li {float: left;width: 100%;font-size: 24px;}.box-r li a {color: #000;}.box-r li:hover {font-weight: bold;}.grayscale{-webkit-filter:grayscale(1);}.sepia{-webkit-filter:sepia(1);}.saturate{-webkit-filter:saturate(0.5);}.hue-rotate{-webkit-filter:hue-rotate(90deg);}.invert{-webkit-filter:invert(1);}.opacity{-webkit-filter:opacity(.2);}.brightness{-webkit-filter:brightness(.5);}.contrast{-webkit-filter:contrast(2);}.blur{-webkit-filter:blur(3px);}.drop-shadow{-webkit-filter:drop-shadow(5px 5px 5px #ccc);}</style></head><body><div class="index"><h1>滤镜Filters的十种特殊效果</h1><hr><div class="box-l"><h2 id="normal">正常效果</h2><img class="normal" alt="HTML5 Logo" src="http://img.blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/><hr><h2 id="grayscale">一、grayscale灰度--grayscale(0-1)</h2><img class="grayscale" alt="HTML5 Logo" src="http://img.blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/><hr><h2 id="sepia">二、sepia褐色、复古--sepia(0-1)</h2><img class="sepia" alt="HTML5 Logo" src="http://img.blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/><hr><h2 id="saturate">三、saturate饱和度--saturate(0-1)</h2><img class="saturate" alt="HTML5 Logo" src="http://img.blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/><hr><h2 id="hue-rotate">四、hue-rotate色相旋转--hue-rotate(0deg-360deg)</h2><img class="hue-rotate" alt="HTML5 Logo" src="http://img.blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/><hr><h2 id="invert">五、invert反色--invert(0-1)</h2><img class="invert" alt="HTML5 Logo" src="http://img.blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/><hr><h2 id="opacity">六、opacity透明度--opacity(0-1)</h2><img class="opacity" alt="HTML5 Logo" src="http://img.blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/><hr><h2 id="brightness">七、brightness亮度--brightness(0-x)</h2><img class="brightness" alt="HTML5 Logo" src="http://img.blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/><hr><h2 id="contrast">八、contrast对比度--contrast(0-x)</h2><img class="contrast" alt="HTML5 Logo" src="http://img.blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/><hr><h2 id="blur">九、blur模糊--blur(0xp-Xpx)</h2><img class="blur" alt="HTML5 Logo" src="http://img.blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/><hr><h2 id="drop-shadow">十、drop-shadow阴影--drop-shadow(x y 模糊度 颜色)</h2><img class="drop-shadow" alt="HTML5 Logo" src="http://img.blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/></div><div class="box-r"><ul><li><a href="#grayscale">grayscale灰度</a></li><li><a href="#sepia">sepia褐色</a></li><li><a href="#saturate">saturate饱和度</a></li><li><a href="#hue-rotate">hue-rotate色相旋转</a></li><li><a href="#invert">invert反色</a></li><li><a href="#opacity">opacity透明度</a></li><li><a href="#brightness">brightness亮度</a></li><li><a href="#contrast">contrast对比度</a></li><li><a href="#blur">blur模糊</a></li><li><a href="#drop-shadow">drop-shadow阴影</a></li></ul></div></div></body></html>

1 0