【CSS濾鏡的使用】

我是太陽啦啦啦發表於2017-01-15
CSS

前言:

學習是一個接著一個階段的旅程，每個過程的學習都是從好奇開始，期間的過程帶來的是無限的“驚喜”，伴隨著例項，不斷成長！

核心：

一、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>


 

總結：

更多的實現需要我們在實踐中加深認識，在後面的學習過程中，會和大家繼續分享關於CSS的知識，感謝大家的寶貴時間，下次再見！

相關文章