滤镜Filters的十种特殊效果

时间：2022-07-29 04:19:10

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

实现如下图所示的效果：

滤镜Filters的十种特殊效果

                                             滤镜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>





















标签：

相关文章