4、CSS濾鏡
4.1、Alpha屬性－－設置透明層次
4.2、Blur 濾鏡－－模糊效果
4.3、FlipH、FlipV 濾鏡－－水平垂直翻轉
4.4、Gray濾鏡－－灰度
4.5、Invert濾鏡－－反轉
4.6、Xray濾鏡－－X射線
4.7、Wave濾鏡－－波紋
使用濾鏡屬性可以把可視化的濾鏡和轉場效果添加到一個標準的 HTML 元素中，例如圖片、文本，以及其他一些對象。對于濾鏡和漸變效果，前者是基礎，后者是濾鏡效果的不斷變化和演示更替。 下面介紹幾種常用的濾鏡：
1、Alpha 濾鏡-- 設置透明層次
基本語法
{
filter: alpha (
opacity = opacity,
finishopacity = finishopacity,
style = style,
startx = startx,
starty = starty,
finishx = finishx,
finishy = finishy
)
}
語法解釋
Alpha 屬性是把一個目標元素與背景混合，設計者可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定坐標，可以指定點、線、面的透明度。它們的含義分別如下：
“opacity”：代表透明度水準。范圍是從0~100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。
“finishopacity”：是一個可選參數，如果想要設置漸變的透明效果，就可以使用他們來指定結束時的透明度。范圍也是0 到 100。
“style”：指定了透明區域的形狀特征。其中0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。
“StartX”和“StartY”：代表漸變透明效果的開始X和Y坐標。
“FinishX”和“FinishY”：代表漸變透明效果結束X和Y 的坐標。
文件范例：13-23.htm
{
filter: alpha (
opacity = opacity,
finishopacity = finishopacity,
style = style,
startx = startx,
starty = starty,
finishx = finishx,
finishy = finishy
)
}
文件說明：
設定 Alpha 濾鏡為半透明
顯示結果：
下面的三種效果除“Style”參數不同外（分別為1、2、3），其它參數均相同。圖1的代碼是： Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)；
2、Blur 濾鏡-- 模糊效果
基本語法
{ filter:blur (
add = add,
direction = direction,
strength = strength
)
}
語法解釋
add 參數是一個布爾判斷：true （默認）或false ，它指定圖片是否被改變成印象派的模糊效果。
模糊效果是按順時針方向進行的，derection 參數用來設置模糊的方向。其中0°表示垂直向上，然后每45°為一個單位，默認值是向左的270°。
strength 值只能使用整數來指定，它代表有多少像素的寬度將受到模糊影響，默認是 5 像素。
文件范例：13-24.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-24.htm -->
<!-- 文件說明：CSS中的Blur濾鏡 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS中的Blur濾鏡</TITLE>
<Style Type="text/css">
<!--
img{
FILTER:BLUR(STRENGTH=10);
}
-->
</Style>
</HEAD>
<BODY>
<H2>強大的CSS濾鏡</H2>
<IMG Src=13-23.jpg>
</BODY>
</HTML>
文件說明：
設定了 blur 濾鏡的模糊強度為 10。
顯示結果：
3、FlipH、FlipV 濾鏡-- 水平垂直翻轉
基本語法
{ filter:filph }
{ filter:filpv }
語法解釋
上述兩句代碼分別 表示水平翻轉和垂直翻轉
文件范例：13-25.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-25.htm -->
<!-- 文件說明：CSS中的FlipV濾鏡 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS中的FlipV濾鏡</TITLE>
<Style Type="text/css">
<!--
img{
FILTER:FlipV;
}
-->
</Style>
</HEAD>
<BODY>
<H2>強大的CSS濾鏡</H2>
<IMG Src=13-23.jpg>
</BODY>
</HTML>
文件說明：
設定垂直翻轉濾鏡
顯示結果：
4、Gray 濾鏡 -- 灰度
基本語法
{ filter:gray }
語法解釋
Gray 濾鏡的作用是把一張圖片變成灰度圖。
文件范例：13-26.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-26.htm -->
<!-- 文件說明：CSS中的Gray濾鏡 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS中的Gray濾鏡</TITLE>
<Style Type="text/css">
<!--
img{
FILTER:gray;
}
-->
</Style>
</HEAD>
<BODY>
<H2>強大的CSS濾鏡</H2>
<IMG Src=13-23.jpg>
</BODY>
</HTML>
顯示結果：
5、Invert 濾鏡 -- 反轉
基本語法
{ filter:invert }
語法解釋
Invert 濾鏡的作用是把對象的可視化屬性全部翻轉，包括色彩、飽和度和亮度值。
文件范例：13-27.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-27.htm -->
<!-- 文件說明：CSS中的Invert濾鏡 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS中的Invert濾鏡</TITLE>
<Style Type="text/css">
<!--
img{
FILTER:invert;
}
-->
</Style>
</HEAD>
<BODY>
<H2>強大的CSS濾鏡</H2>
<IMG Src=13-23.jpg>
</BODY>
</HTML>
顯示結果：
6、Xray 濾鏡 -- X 射線
基本語法
{ filter:xray }
語法解釋
Xray 濾鏡的作用是讓對象反映出它的輪廓并把這些輪廓加亮，也就是所謂的“X”光片。
文件范例：13-28.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-28.htm -->
<!-- 文件說明：CSS中的Xray濾鏡 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS中的Xray濾鏡</TITLE>
<Style Type="text/css">
<!--
img{
FILTER:xray;
}
-->
</Style>
</HEAD>
<BODY>
<H2>強大的CSS濾鏡</H2>
<IMG Src=13-23.jpg>
</BODY>
</HTML>
顯示結果：
7、Wave 濾鏡 -- 波紋
基本語法
{
filter:wave (
add = add,
freq = freq,
lightstrength = strength,
phase = phase,
strength = strength
)
}
語法解釋
Wave
Add參數有兩個參數值：True代表把對象按照波紋樣式打亂；False代表不打亂；
Freq參數指生成波紋的頻率，也就是指定在對象上共需要產生多少個完整的波紋。
LightStrength參數是為了使生成的波紋增強光的效果。參數值可以從0到100。
Phase參數用來設置正弦波開始的偏移量。這個值的通用值為0，它的可變范圍為從0到100。這個值代表開始時的偏移量占波長的百分比。比如該值為25，代表正弦波從90度（360*25%）的方向開始。
STRENGTH 振幅大小
文件范例：13-29.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-29.htm -->
<!-- 文件說明：CSS中的Wave濾鏡 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS中的Wave濾鏡</TITLE>
<Style Type="text/css">
<!--
img{
FILTER:wave(add=add,freq=2,lightstrength=50,phase=45,strength=10);
}
-->
</Style>
</HEAD>
<BODY>
<H2>強大的CSS濾鏡</H2>
<IMG Src=13-23.jpg>
</BODY>
</HTML>
顯示結果：
posted on 2007-10-09 17:59
CoderDream 閱讀(485)
評論(1) 編輯 收藏 所屬分類:
CSS