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