CSS教程

CSS过滤器 - 文本和图像效果

← 上一节 下一节 →

您可以使用CSS过滤器在不使用图像或其他图形的情况下为网页的文本，图像和其他方面添加特殊效果. 过滤器仅适用于Internet Explorer 4.0 .如果您正在为多个浏览器开发您的网站，那么使用CSS过滤器可能不是一个好主意，因为它可能不会带来任何好处.

在本章中，我们将看到每个CSS过滤器的细节.这些过滤器可能无法在您的浏览器中使用.

Alpha通道

Alpha通道过滤器会改变对象的不透明度，使其融入背景.可以在此过滤器中使用以下参数 :

Sr.No.参数&说明
1

不透明度

不透明度的级别. 0是完全透明的，100是完全不透明的.

2

finishopacity

对象另一端的不透明度等级.

3

样式

不透明度渐变的形状.

0 =均匀

1 =线性

2 =径向

3 =矩形

4

startX

不透明度的X坐标渐变开始.

5

startY

开始使用不透明度渐变的Y坐标.

6

finishX

不透明度渐变的X坐标结束.

7

finishY

不透明度渐变的Y坐标结束.

示例

<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

add

True or false. If true, the image is added to the blurred image; and if false, the image is not added to the blurred image.

2

direction

The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).

0 = Top

45 = Top right

90 = Right

135 = Bottom right

180 = Bottom

225 = Bottom left

270 = Left

315 = Top left

3

strength

The number of pixels the blur will extend. The default is 5 pixels.

Example

<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

color

The color that you'd like to be transparent.

Example

<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

color

The color, in #RRGGBB format, of the dropshadow.

2

offX

Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left.

3

offY

Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up.

4

positive

If true, all opaque pixels of the object have a dropshadow. If false, all transparent pixels have a dropshadow. The default is true.

Example

<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

翻转效果用于创建对象的镜像。 可以在此过滤器中使用以下参数:

Sr.No.Parameter & Description
1

FlipH

Creates a horizontal mirror image

2

FlipV

Creates a vertical mirror image

Example

<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

发光效果用于在对象周围创建光晕。 如果它是透明图像，则会在其不透明像素周围创建发光。 可以在此过滤器中使用以下参数:

Sr.No.Parameter & Description
1

color

The color you want the glow to be.

2

strength

The intensity of the glow (from 1 to 255).

Example

<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

Converts the colors of the object to 256 shades of gray.

Example

<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

Invert

Maps the colors of the object to their opposite value in the color spectrum.

Example

<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

color

The color that the transparent areas will become.

Example

<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

阴影滤镜用于在指定的方向和颜色上创建衰减阴影。 这是一个位于Dropshadow和Glow之间的过滤器。 可以在此过滤器中使用以下参数:

Sr.No.Parameter & Description
1

color

The color that you want the shadow to be.

2

direction

The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).

0 = Top

45 = Top right

90 = Right

135 = Bottom right

180 = Bottom

225 = Bottom left

270 = Left

315 = Top left

Example

<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

波浪效应用于使物体产生正弦波失真，使其看起来呈波浪状。 可以在此过滤器中使用以下参数:

Sr.No.Parameter & Description
1

add

值为1会将原始图像添加到波形图像，0则不会。

2

freq

波数。

3

light

波浪上的光强（从0到100）。

4

phase

正弦波应该在多大程度上开始（从0到100）。

5

strength

波浪效应的强度。

Example

<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

xray

灰度和颜色深度变平。

Example

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


← 上一节 下一节 →

相关菜鸟教程