【CSS滤镜的使用】

最新推荐文章于 2024-07-04 18:24:34 发布

好菇娘の当自强

最新推荐文章于 2024-07-04 18:24:34 发布

阅读量700

点赞数

文章标签： css 实例

本文链接：https://blog.csdn.net/DJuan15732626157/article/details/54564050

版权

●【B/S探索】专栏收录该内容

19 篇文章 0 订阅

订阅专栏

前言:

学习是一个接着一个阶段的旅程，每个过程的学习都是从好奇开始，期间的过程带来的是无限的“惊喜”，伴随着实例，不断成长！

核心：

一、Alpha 通道

<style>
<!--
body{
.alpha{
	filter:alpha(opacity=50);
}
-->
</style>
   </head>
<body>
<img src="building1.jpg" border="0" class="alpha">
</body>

二、Blur 模糊

<style>
<!--
.blur{
	filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);
}
-->
</style>
   </head>
<body>
<img src="building9.jpg" class="blur">
</body>

三、chroma 透明色

<style>
<!--
.chroma{
	filter:chroma(color=FF6800);		/* 去掉金黄色 */
}
-->
</style>
   </head>
<body>
<img src="tiger.gif" class="chroma">
</body>

四、Flip 翻转

<style>
<!--
body{
	margin:12px;
	background:#000000;
}
.flip1{
	filter:fliph;	/* 水平翻转 */
}
.flip2{
	filter:flipv;	/* 竖直翻转 */
}
.flip3{
	filter:flipv fliph;	/* 水平、竖直同时翻转 */
}
-->
</style>
   </head>
<body>
<img src="building4.jpg"><img src="building4.jpg" class="flip1"><br>
<img src="building4.jpg" class="flip2"><img src="building4.jpg" class="flip3">
</body>

五、mask 遮罩

<!--
.mask{
	filter:mask(color=#8888FF);	/* 遮罩效果 */
}
-->
</style>
   </head>
<body>
	<img src="muma.gif" class="mask">
</body>

六、wave 波浪

<style>
<!--
span.wave1{	
	filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4);
}
span.wave2{	
	filter:wave(add=0,freq=4,lightstrength=20,phase=25,strength=5);
}
span.wave3{	
	filter:wave(add=1,freq=4,lightstrength=60,phase=0,strength=6);
}
-->
</style>
   </head>
<body>
	<span class="wave1">波浪Wave</span>
	<span class="wave2">波浪Wave</span>
	<span class="wave3">波浪Wave</span>
</body>