代碼學習群簡易教程(27)

  代碼學習群簡易教程(27)濾鏡5

代碼學習群簡易教程(27)

本節繼續講解css的常用濾鏡。本節講解的內容為:FILTER: chroma濾鏡和progid濾鏡。

一、FILTER: chroma濾鏡: 透明顏色濾鏡

Chroma濾鏡可以設置一個對象中指定的顏色為透明色。

Chroma濾鏡的表達式很簡單,它只有一個參數。只需把您想要指定透明的顏色用Color屬性設置出來就可以了:

style=”Filter:Chroma(color=#00ff00)”

chroma濾鏡對於圖片文件不是很適合。因為很多圖片是經過了減色和壓縮處理(比如JPG、GIF等格式),所以它們很少有固定的位置可以設置為透明。

Chroma濾鏡文字:

Chroma濾鏡文字的製作,需要用兩層容器共同控制文字內容。

舉例如下:

1、用兩層塊區標籤(或者段落標籤)控制文字內容。第一層塊區標籤中設置閃光的背景圖片,第二層塊區標籤中設置濾鏡樣式。

代碼舉例:

<DIV style=”BACKGROUND: url(http://image73.360doc.com/DownloadImg/2014/06/0217/42246199_222.jpg)”>

<DIV style=”FILTER: chroma(color=#336699); BACKGROUND-COLOR: #0000ff” align=center><FONT style=”FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 40pt” color=#336699><B>「春天沒來」歡迎您</B></FONT></DIV></DIV>

2、如果「刪除」第一層塊區標籤,閃光的文字就變為白色的文字啦。

3、也可以把第二層塊區標籤替換為移動標籤,代碼如下:

<DIV style=”BACKGROUND: url(http://image73.360doc.com/DownloadImg/2014/06/0217/42246199_222.jpg)”>

<MARQUEE style=”FILTER: chroma(color=#336699); BACKGROUND-COLOR: #0000ff” behavior=alternate scrollAmount=3 scrollDelay=10><FONT style=”FONT-FAMILY: 微軟雅黑,Microsoft YaHei; FONT-SIZE: 40pt” color=#336699><B>「春天沒來」歡迎您</B></FONT></MARQUEE></DIV>

效果如下:

「春天沒來」歡迎您

代碼學習群簡易教程(27)

二、progid濾鏡:透明處理濾鏡

progid濾鏡表達式舉例:

style=”FILTER: progid:DXImageTransform.Microsoft.emboss(bias=0);”

1、progid濾鏡文字:(浮凸效果)

(1)用段落標籤與文字標籤控制文字內容。

代碼舉例:

<P style=”FILTER: progid:DXImageTransform.Microsoft.emboss(bias=0); BACKGROUND-COLOR: rgb(0,0,0); WIDTH: 600px; HEIGHT: 80px” align=center><FONT style=”FONT-FAMILY: 黑體; COLOR: rgb(0,255,255); FONT-SIZE: 38pt”><STRONG>progid濾鏡文字 </STRONG></FONT></P>

效果:

progid濾鏡文字

(2)只用段落標籤控制文字內容。

代碼舉例:

<P style=”FILTER: progid:DXImageTransform.Microsoft.emboss(bias=0); BACKGROUND-COLOR: rgb(0,0,0); WIDTH: 650px; FONT-FAMILY: 黑體; HEIGHT: 80px; COLOR: rgb(0,255,255); FONT-SIZE: 38pt” align=center><STRONG>progid濾鏡文字 </STRONG></P>

(3)只用移動標籤控制文字內容。

代碼舉例:

<MARQUEE style=”FILTER: progid:DXImageTransform.Microsoft.emboss(bias=0); BACKGROUND-COLOR: rgb(250,0,0); WIDTH: 650px; FONT-FAMILY: 黑體; HEIGHT: 80px; COLOR: rgb(255,255,0); FONT-SIZE: 38pt” behavior=alternate align=”center”><STRONG>progid濾鏡文字 </STRONG></MARQUEE>

2、progid濾鏡文字:(漸變背景)

可以用progid濾鏡給文字設置漸變背景。

濾鏡表達式:

style=”FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=’#ff00ff’,endColorStr=’#000000′);

上面的濾鏡表達式,括號內有三個屬性。第一個屬性是指定背景為橫向漸變還是豎向漸變。屬值為0時,是豎向漸變,也就是從上向下漸變;屬值為1時,是橫向漸變,也就是從左向右漸變。第二個屬性是漸變開始處的顏色。第三個屬性是漸變結束處的顏色。

代碼舉例:

<P style=”FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=’#ff00ff’,endColorStr=’#000000′); BACKGROUND-COLOR: rgb(0,0,0); WIDTH: 650px; FONT-FAMILY: 黑體; HEIGHT: 80px; COLOR: rgb(255,255,0); FONT-SIZE: 38pt” align=center><STRONG>progid濾鏡文字 </STRONG></P>

<P style=”FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=’#ff00ff’,endColorStr=’#000000′); BACKGROUND-COLOR: rgb(0,0,0); WIDTH: 650px; FONT-FAMILY: 黑體; HEIGHT: 80px; COLOR: rgb(0,255,255); FONT-SIZE: 38pt” align=center><STRONG>progid濾鏡文字 </STRONG></P>

<P style=”FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=’#ff0000′,endColorStr=’#0000ff’); BACKGROUND-COLOR: rgb(0,0,0); WIDTH: 650px; FONT-FAMILY: 黑體; HEIGHT: 80px; COLOR: rgb(0,255,0); FONT-SIZE: 38pt” align=center><STRONG>progid濾鏡文字 </STRONG></P>

<P style=”FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=’#ff00ff’,endColorStr=’#0000ff’); BACKGROUND-COLOR: rgb(0,0,0); WIDTH: 650px; FONT-FAMILY: 黑體; HEIGHT: 80px; COLOR: rgb(255,150,0); FONT-SIZE: 38pt” align=center><STRONG>progid濾鏡文字 </STRONG></P>

效果之一:

progid濾鏡文字

3、progid濾鏡圖片:

(1)浮雕效果:

代碼舉例:

<P style=”FILTER: progid:DXImageTransform.Microsoft.emboss(bias=0); BACKGROUND-COLOR: rgb(0,0,0); WIDTH: 366px; HEIGHT: 240px” align=center><IMG style=”BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 366px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 240px; BORDER-LEFT-WIDTH: 0px” src=”http://userimage5.360doc.com/14/0705/03/9213609_201407050308550538.jpg”> </P>

效果:

代碼學習群簡易教程(27)

(2)漸變背景效果:

代碼舉例:

<P style=”FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=’#ff00ff’,endColorStr=’#0000ff’); BACKGROUND-COLOR: rgb(0,0,0); WIDTH: 386px; FONT-FAMILY: 黑體; HEIGHT: 260px; COLOR: rgb(255,150,0); FONT-SIZE: 38pt” align=center><IMG style=”BORDER-RIGHT-WIDTH: 0px; MARGIN: 10px; WIDTH: 366px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 240px; BORDER-LEFT-WIDTH: 0px” src=”http://userimage5.360doc.com/14/0705/03/9213609_201407050308550538.jpg”> </P>

效果:

代碼學習群簡易教程(27)

代碼學習群簡易教程(27)

(3)三種角度的旋轉圖片:

progid濾鏡,還可以使圖片進行旋轉。

代碼舉例:

原圖:<BR><IMG src=”http://image55.360doc.com/DownloadImg/2012/11/0611/28032418_25.gif”> 旋轉90度:<BR><IMG style=”FILTER: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)” src=”http://image55.360doc.com/DownloadImg/2012/11/0611/28032418_25.gif”> 旋轉180度:<BR><IMG style=”FILTER: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)” src=”http://image55.360doc.com/DownloadImg/2012/11/0611/28032418_25.gif”> 旋轉270度 : <BR><IMG style=”FILTER: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)” src=”http://image55.360doc.com/DownloadImg/2012/11/0611/28032418_25.gif”>

上面的代碼中,在圖片標籤中添加了濾鏡樣式:

style=”FILTER: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)”

括號內的數值為「1」,代表順時針90度旋轉;括號內的數值為「2」,代表順時針180度旋轉;括號內的數值為「3」,代表順時針270度旋轉。

(4)圖片的旋轉、拉伸與縮放:

progid濾鏡,不僅僅可以使圖片進行旋轉,還能夠使圖片拉伸與縮放。

代碼舉例:

<IMG style=”FILTER: progid:DXImageTransform.Microsoft.Matrix( SizingMethod=’auto expand’,FilterType=bilinear,Dx=0,Dy=0, M11=0.5,M12=0.1,M21=0.1,M22=0.5)” src=”http://userimage2.360doc.com/12/0409/22/2904667_201204092200570856.jpg”>

上面的代碼中,在圖片標籤中添加了濾鏡樣式:

style=”FILTER: progid:DXImageTransform.Microsoft.Matrix( SizingMethod=’auto expand’,FilterType=bilinear,Dx=0,Dy=0, M11=0.5,M12=0.1,M21=0.1,M22=0.5)”

濾鏡樣式解析:

   enabled:定義濾鏡是否被禁止使用,取值範圍為布爾值。當取值為true的時候濾鏡可用;取值為false時,禁止使用濾鏡。此屬性的默認值為:true,因此,可以缺省。

SizingMethod:定義濾鏡使用圖片時是否改變尺寸。當取值為clip to original時,圖片不改變尺寸;當取值為auto expand時,圖片改變尺寸。

FilterType:定義圖片旋轉的方法。當取值為bilinear時,使用平滑、靜態的顯示效果;nearest neighhbor一般用於動態濾鏡中。

Dx:定義水平方向上的向量增加量。使用浮點數定義增量的大小,默認值為1.0。

Dy:定義垂直方向上的向量增加量。使用浮點數定義增量的大小,默認值為1.0。

m11:m11的作用為控制圖片的顯示寬度。默認值為1.0。當取值大於1.0時,圖片右邊線向右移動,同時拉伸圖片的寬度;當取值小於1.0時,圖片右邊線向左移動,同時收縮圖片的寬度。當取正值時為原圖片樣式,取負值時為水平翻轉圖片樣式。

m12:定義圖片下邊線水平方向上的顯示位置。默認值為0。當取值大於0時,圖片的上邊線不動,下邊線向右移動,同時拉伸圖片的寬度;當取值小於0時,圖片的下邊線不動,上邊線向右移動,同時拉伸圖片的寬度。

m21:m21的作用為控制圖片豎直方向上的顯示位置。默認值為0。當取值大於0時,圖片的左邊線不動,右邊線向下移動,同時拉伸圖片的高度;當取值小於0時,圖片的右邊線不動,左邊線向下移動,同時拉伸圖片的高度。

m22:定義圖片豎直方向上的顯示位置。默認值為1.0。當取值大於1.0時,底部邊線向下移,同時拉伸元素的高度;當取值小於1.0時,為垂直翻轉圖片。當負值的絕對值大於1時,拉伸圖片的高度;當負值的絕對值小於1時,收縮圖片的高度;當負值的絕對值等於1時,為原圖片的高度。

註:實際上,要使圖片顯示不同的樣式,你只需修改m11、m12、m21與m22四個屬性即可。

代碼學習群簡易教程(27)

作業:

一、填空:

1、chroma濾鏡名稱為:(),Chroma濾鏡可以設置一個對象中()為透明色。Chroma濾鏡的表達式很簡單,它只有一個參數:()。

2、Chroma濾鏡的表達式為:()。

3、chroma濾鏡不能用於()文件。

4、progid濾鏡名稱為:()。

5、progid濾鏡文字(浮凸效果)的表達式為:()。

6、progid濾鏡文字(漸變背景)的表達式為:()。

二、簡述chroma濾鏡文字的三種設置方法。

三、簡述progid濾鏡文字(浮凸效果)的三種設置方法。

四、解析progid濾鏡文字(漸變背景)的表達式。

五、解析濾鏡樣式:style=”FILTER: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)”

六、「圖片的旋轉、拉伸與縮放」比較複雜。必須弄清楚此濾鏡樣式中各種屬性的作用與效果。試著解析下面的濾鏡樣式:

style=”FILTER: progid:DXImageTransform.Microsoft.Matrix( SizingMethod=’auto expand’,FilterType=bilinear,Dx=0,Dy=0, M11=0.5,M12=0.1,M21=0.1,M22=0.5)”

七、製作一篇Chroma濾鏡文字網頁。

八、製作一篇浮凸效果濾鏡文字網頁。

九、製作一篇浮凸效果濾鏡圖片網頁。

十、製作一篇漸變背景效果濾鏡文字網頁。

十一、製作一篇漸變背景效果濾鏡圖片網頁。

十二、製作一篇三種角度的旋轉圖片網頁。

十三、製作幾篇「旋轉、拉伸與縮放」的圖片網頁。並認真體會m11、m12、m21與m22各自的作用與效果。

「春天沒來」編撰

2014年7月22日於北京