CSS 滤镜 - 文本和图像效果

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

在本章中，我们将看到每个 CSS 过滤器的详细信息。这些过滤器可能无法在您的浏览器中工作。

阿尔法通道

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

先生。	参数及说明
1	不透明度不透明度级别。0 是完全透明，100 是完全不透明。
2	成品不透明度对象另一端的不透明度级别。
3	风格不透明度渐变的形状。 0 = 统一 1 = 线性 2 = 径向 3 = 矩形
4	开始X 不透明度渐变开始的 X 坐标。
5	启动Y 不透明度渐变开始的 Y 坐标。
6	完成X 不透明度渐变结束的 X 坐标。
7	完成Y 不透明度渐变结束的 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>

它将产生以下结果 -

运动模糊

运动模糊用于创建具有方向和强度的模糊图片或文本。此过滤器中可以使用以下参数 -

先生。	参数及说明
1	添加对或错。如果为 true，则将图像添加到模糊图像中；如果为 false，则图像不会添加到模糊图像中。
2	方向模糊的方向，顺时针方向，舍入为 45 度增量。默认值为 270（左）。 0 = 顶部 45 = 右上角 90 = 右 135 = 右下角 180 = 底部 225 = 左下角 270 = 左 315 = 左上角
3	力量模糊将扩展的像素数。默认值为 5 像素。

先生。

参数及说明

添加

对或错。如果为 true，则将图像添加到模糊图像中；如果为 false，则图像不会添加到模糊图像中。

方向

模糊的方向，顺时针方向，舍入为 45 度增量。默认值为 270（左）。

0 = 顶部

45 = 右上角

90 = 右

135 = 右下角

180 = 底部

225 = 左下角

270 = 左

315 = 左上角

力量

模糊将扩展的像素数。默认值为 5 像素。

例子

现场演示

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

它将产生以下结果 -

色度滤镜

色度滤镜用于使任何特定颜色透明，通常与图像一起使用。您也可以将其与滚动条一起使用。在此过滤器中可以使用以下参数 -

先生。	参数及说明
1	颜色您想要透明的颜色。

例子

现场演示

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

它将产生以下结果 -

投影效果

投影用于以指定的 X（水平）和 Y（垂直）偏移和颜色创建对象的阴影。

此过滤器中可以使用以下参数 -

先生。	参数及说明
1	颜色阴影的颜色，采用 #RRGGBB 格式。
2	关闭X 投影沿 x 轴偏离视觉对象的像素数。正整数将投影向右移动，负整数将投影向左移动。
3	关闭Y 投影沿 y 轴偏离视觉对象的像素数。正整数使阴影向下移动，负整数使阴影向上移动。
4	积极的如果为 true，则对象的所有不透明像素都有阴影。如果为 false，则所有透明像素都有阴影。默认为 true。

例子

现场演示

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

它将产生以下结果 -

翻转效果

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

先生。	参数及说明
1	翻转H 创建水平镜像
2	翻转V 创建垂直镜像

先生。

参数及说明

翻转H

创建水平镜像

翻转V

创建垂直镜像

例子

现场演示

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

它将产生以下结果 -

发光效果

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

先生。	参数及说明
1	颜色您想要的发光颜色。
2	力量发光强度（从 1 到 255）。

先生。

参数及说明

颜色

您想要的发光颜色。

力量

发光强度（从 1 到 255）。

例子

现场演示

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

它将产生以下结果 -

灰度效果

灰度效果用于将对象的颜色转换为 256 级灰度。此过滤器中使用以下参数 -

先生。	参数及说明
1	灰度将对象的颜色转换为 256 级灰度。

例子

现场演示

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

它将产生以下结果 -

反转效果

反转效果用于将对象的颜色映射到色谱中的相反值，即创建负图像。此过滤器中使用以下参数 -

先生。	参数及说明
1	倒置将对象的颜色映射到色谱中相反的值。

例子

现场演示

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

它将产生以下结果 -

遮罩效果

遮罩效果用于将透明像素变为指定颜色并使不透明像素透明。此过滤器中使用以下参数 -

先生。	参数及说明
1	颜色透明区域将变成的颜色。

例子

现场演示

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

它将产生以下结果 -

阴影滤镜

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

先生。	参数及说明
1	颜色您想要阴影的颜色。
2	方向模糊的方向，顺时针方向，舍入为 45 度增量。默认值为 270（左）。 0 = 顶部 45 = 右上角 90 = 右 135 = 右下角 180 = 底部 225 = 左下角 270 = 左 315 = 左上角

先生。

参数及说明

颜色

您想要阴影的颜色。

方向

模糊的方向，顺时针方向，舍入为 45 度增量。默认值为 270（左）。

0 = 顶部

45 = 右上角

90 = 右

135 = 右下角

180 = 底部

225 = 左下角

270 = 左

315 = 左上角

例子

现场演示

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

它将产生以下结果 -

波浪效应

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

先生。	参数及说明
1	添加值 1 将原始图像添加到波形图像中，值 0 则不会。
2	频率波数。
3	光波上的光强度（从 0 到 100）。
4	阶段正弦波应从什么角度开始（从 0 到 100）。
5	力量波浪效应的强度。

例子

现场演示

<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射线效应

X 射线效果可灰度化并使颜色深度变平。此过滤器中使用以下参数：

先生。	参数及说明
1	X射线灰度化并使颜色深度变平。

例子

现场演示

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

它将产生以下结果 -

先生。	参数及说明
1	添加值 1 将原始图像添加到波形图像中，值 0 则不会。
2	频率波数。
3	光波上的光强度（从 0 到 100）。
4	阶段正弦波应从什么角度开始（从 0 到 100）。
5	力量波浪效应的强度。