CSS過濾器-文本和圖像效果--26497;-23458;-20070s;

您可以使用CSS過濾器在不使用圖像或其他圖形的情況下向文本、圖像和網頁的其他方面添加特殊效果。過濾器僅適用於Internet Explorer 4.0。如果您正在爲多個瀏覽器開發站點，那麼使用CSS過濾器可能不是一個好主意，因爲它可能不會帶來任何優勢。

在本章中，我們將看到每個CSS過濾器的詳細信息。這些篩選器可能無法在瀏覽器中工作。

Alpha Channel

Alpha通道過濾器改變對象的不透明度，使其混合到背景中。此篩選器中可以使用以下參數−

Sr.No.	Parameter & Description
1	不透明度不透明度級別。0是完全透明的，100是完全不透明的。
2	有限性對象另一端的不透明度級別。
3	style 不透明度漸變的形狀。 0=均勻 1=線性 2=徑向 3=矩形
4	startX公司開始不透明漸變的X坐標。
5	starty 開始不透明度漸變的Y坐標。
6	完成不透明度漸變到結束的X坐標。
7	有限的不透明度漸變結束的Y坐標。

Example

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Alpha(Opacity=100, 
         FinishOpacity = 0, 
         Style = 2, 
         StartX = 20, 
         StartY = 40, 
         FinishX = 0, 
         FinishY = 0)" />
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue;
         Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
   </body>
</html>

它將產生以下結果&負;

Motion Blur

運動模糊用於創建方向和強度模糊的圖片或文本。此篩選器中可以使用以下參數−

Sr.No.	Parameter & Description
1	添加是真是假。如果爲真，則圖像將添加到模糊圖像;如果爲假，則圖像不會添加到模糊圖像。
2	direction 模糊的方向，順時針方向，四捨五入到45度增量。默認值爲270（左）。 0=頂部 45=右上 90=右 135=右下 180=底部 225=左下 270=左 315=左上角
3	力量模糊將擴展的像素數。默認值爲5像素。

Sr.No.

Parameter & Description

添加

是真是假。如果爲真，則圖像將添加到模糊圖像;如果爲假，則圖像不會添加到模糊圖像。

direction

模糊的方向，順時針方向，四捨五入到45度增量。默認值爲270（左）。

0=頂部

45=右上

90=右

135=右下

180=底部

225=左下

270=左

315=左上角

力量

模糊將擴展的像素數。默認值爲5像素。

Example

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue; 
         Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
      </div>
   </body>
</html>

它將產生以下結果&負;

Chroma Filter

色度濾鏡用於使任何特定顏色透明，通常用於圖像。你也可以和滾動條一起使用。此篩選器中可以使用以下參數−

Sr.No.	Parameter & Description
1	顏色你想要透明的顏色。

Example

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/images/css.gif" 
         alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
      
      <p>Text Example:</p>
      
      <div style = "width: 580; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: #3300FF; 
         Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
   </body>
</html>

它將產生以下結果&負;

Drop Shadow Effect

放置陰影用於在指定的X（水平）和Y（垂直）偏移和顏色處創建對象的陰影。

此篩選器中可以使用以下參數−

Sr.No.	Parameter & Description
1	顏色 dropshadow的顏色，採用RRGGBB格式。
2	離合放置陰影沿x軸從視覺對象偏移的像素數。正整數向右移動陰影，負整數向左移動陰影。
3	奧菲放置陰影沿y軸從視覺對象偏移的像素數。正整數向下移動下拉陰影，負整數向上移動下拉陰影。
4	積極的如果爲true，則對象的所有不透明像素都具有dropshadow。如果爲false，則所有透明像素都具有dropshadow。默認值爲true。

Example

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter:drop-shadow(2px 2px 1px #FF0000);">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
   </body>
</html>

它將產生以下結果&負;

Flip Effect

Flip effect is used to create a mirror image of the object. 此篩選器中可以使用以下參數−

Sr.No.	Parameter & Description
1	翻轉創建水平鏡像
2	翻轉電視創建垂直鏡像

Sr.No.

Parameter & Description

翻轉

創建水平鏡像

翻轉電視

創建垂直鏡像

Example

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: FlipH">
      
      <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
      
      <p>Text Example:</p>
      
      <div style = "width: 300; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: FlipV">CSS Tutorials</div>
   </body>
</html>

它將產生以下結果&負;

Glow Effect

Glow effect is used to create a glow around the object. If it is a transparent image, then glow is created around the opaque pixels of it. 此篩選器中可以使用以下參數−

Sr.No.	Parameter & Description
1	顏色你想要的發光顏色。
2	力量輝光的強度（從1到255）。

Sr.No.

Parameter & Description

顏色

你想要的發光顏色。

力量

輝光的強度（從1到255）。

Example

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
   </body>
</html>

它將產生以下結果&負;

Grayscale Effect

灰度效果用於將對象的顏色轉換爲256個灰度。此篩選器中使用了以下參數−

Sr.No.	Parameter & Description
1	Grayscale，Grayscale，Grayscale，Grayscale 將對象的顏色轉換爲256個灰度。

Example

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: grayscale(50%)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: grayscale(50%)">CSS Tutorials</div>
   </body>
</html>

它將產生以下結果&負;

Invert Effect

反轉效果用於將對象的顏色映射到其在顏色譜中的相反值，即創建負圖像。此篩選器中使用了以下參數−

Sr.No.	Parameter & Description
1	反轉將對象的顏色映射到其在顏色譜中的相反值。

Example

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: invert(100%)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: invert(100%)">CSS Tutorials</div>
   </body>
</html>

它將產生以下結果&負;

Mask Effect

遮罩效果用於將透明像素轉換爲指定顏色並使不透明像素透明。此篩選器中使用了以下參數−

Sr.No.	Parameter & Description
1	顏色透明區域將變成的顏色。

Example

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Mask(Color=#00FF00)">CSS Tutorials
      </div>
   </body>
</html>

它將產生以下結果&負;

Shadow Filter

Shadow filter is used to create an attenuated shadow in the direction and color specified. This is a filter that lies in between Dropshadow and Glow. 此篩選器中可以使用以下參數−

Sr.No.	Parameter & Description
1	顏色你想要陰影的顏色。
2	direction 模糊的方向，順時針方向，四捨五入到45度增量。默認值爲270（左）。 0=頂部 45=右上 90=右 135=右下 180=底部 225=左下 270=左 315=左上角

Sr.No.

Parameter & Description

顏色

你想要陰影的顏色。

direction

模糊的方向，順時針方向，四捨五入到45度增量。默認值爲270（左）。

0=頂部

45=右上

90=右

135=右下

180=底部

225=左下

270=左

315=左上角

Example

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: 
         Arial Black; 
         color: red; 
         filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
      </div>
   </body>
</html>

它將產生以下結果&負;

Wave Effect

Wave effect is used to give the object a sine wave distortion to make it look wavy. 此篩選器中可以使用以下參數−

Sr.No.	Parameter & Description
1	添加值爲1會將原始圖像添加到波形圖像，0不會。
2	freq 波數。
3	輕光在波上的強度（從0到100）。
4	相位正弦波應該在什麼程度開始（從0到100）。
5	力量波浪效應的強度。

Example

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) 
         Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
      </div>
   </body>
</html>

它將產生以下結果&負;

X-Ray Effect

X射線效果灰度化並展平顏色深度。此篩選器中使用以下參數：

Sr.No.	Parameter & Description
1	X射線灰度化並展平顏色深度。

Example

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Xray">
      
      <p>Text Example:</p>
      
      <div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Xray">CSS Tutorials
      </div>
   </body>
</html>

它將產生以下結果&負;

Sr.No.	Parameter & Description
1	添加值爲1會將原始圖像添加到波形圖像，0不會。
2	freq 波數。
3	輕光在波上的強度（從0到100）。
4	相位正弦波應該在什麼程度開始（從0到100）。
5	力量波浪效應的強度。

極客書

CSS Filters - Text and Image Effects

Alpha Channel

Example

Motion Blur

Example

Chroma Filter

Example

Drop Shadow Effect

Example

Flip Effect

Example

Glow Effect

Example

Grayscale Effect

Example

Invert Effect

Example

Mask Effect

Example

Shadow Filter

Example

Wave Effect

Example

X-Ray Effect

Example