文本效果（Text Effects）

优质

小牛编辑

125浏览

2023-12-01

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

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

Alpha通道

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

Sr.No.	参数和描述
1	opacity 不透明度。 0是完全透明的，100是完全不透明的。
2	finishopacity 对象另一端的不透明度级别。
3	style 不透明度渐变的形状。 0 =均匀 1 =线性 2 =径向 3 =矩形
4	startX 开始使用不透明度渐变的X坐标。
5	startY 开始使用不透明度渐变的Y坐标。
6	finishX 不透明度渐变的X坐标结束。
7	finishY 不透明度渐变的Y坐标结束。

例子 (Example)

<html>
   <head>
   </head>
   <body>
      <p><b>Image Example:</b></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><b>Text Example:</b></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>

运动模糊

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

Sr.No.	参数和描述
1	add 对或错。如果为true，则将图像添加到模糊图像中; 如果为false，则图像不会添加到模糊图像中。
2	direction 模糊的方向，顺时针方向，四舍五入到45度增量。默认值为270（左）。 0 =顶部 45 =右上角 90 =对 135 =右下角 180 =底部 225 =左下角 270 =左 315 =左上角
3	strength 模糊将延伸的像素数。默认值为5像素。

Sr.No.

参数和描述

add

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

direction

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

0 =顶部

45 =右上角

90 =对

135 =右下角

180 =底部

225 =左下角

270 =左

315 =左上角

strength

模糊将延伸的像素数。默认值为5像素。

例子 (Example)

<html>
   <head>
   </head>
   <body>
      <p><b>Image Example:</b></p>
      <img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
      <p><b>Text Example:</b></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>

色度滤镜

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

Sr.No.	参数和描述
1	color 你想要透明的颜色。

例子 (Example)

<html>
   <head>
   </head>
   <body>
      <p><b>Image Example:</b></p>
      <img src = "/images/css.gif" 
         alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
      <p><b>Text Example:</b></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（垂直）偏移和颜色处创建对象的阴影。

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

Sr.No.	参数和描述
1	color Drophadow的颜色，采用#RRGGBB格式。
2	offX 阴影沿着x轴从视觉对象偏移的像素数。正整数将阴影移动到右侧，负整数将阴影移动到左侧。
3	offY 投影阴影沿y轴偏离视觉对象的像素数。正整数向下移动阴影，负整数向下移动投影。
4	positive 如果为true，则对象的所有不透明像素都有阴影。如果为false，则所有透明像素都有阴影。默认值为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>

翻转效果

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

Sr.No.	参数和描述
1	FlipH 创建水平镜像
2	FlipV 创建垂直镜像

Sr.No.

参数和描述

FlipH

创建水平镜像

FlipV

创建垂直镜像

例子 (Example)

<html>
   <head>
   </head>
   <body>
      <p><b>Image Example:</b></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><b>Text Example:</b></p>
      <div style = "width: 300; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: FlipV">CSS Tutorials</div>
   </body>
</html>

发光效果

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

Sr.No.	参数和描述
1	color 你希望发光的颜色。
2	strength 发光强度（从1到255）。

Sr.No.

参数和描述

color

你希望发光的颜色。

strength

发光强度（从1到255）。

例子 (Example)

<html>
   <head>
   </head>
   <body>
      <p><b>Image Example:</b></p>
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
      <p><b>Text Example:</b></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灰度。此过滤器中使用以下参数 -

Sr.No.	参数和描述
1	grayscale 将对象的颜色转换为256种灰度。

例子 (Example)

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

反转效果

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

Sr.No.	参数和描述
1	Invert 将对象的颜色映射到颜色光谱中的相反值。

例子 (Example)

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

面具效果

蒙版效果用于将透明像素转换为指定颜色，并使不透明像素透明。此过滤器中使用以下参数 -

Sr.No.	参数和描述
1	color 透明区域将变成的颜色。

例子 (Example)

<html>
   <head>
   </head>
   <body>
      <p><b>Image Example:</b></p>
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
      <p><b>Text Example:</b></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之间的过滤器。此过滤器中可以使用以下参数 -

Sr.No.	参数和描述
1	color 你想要阴影的颜色。
2	direction 模糊的方向，顺时针方向，四舍五入到45度增量。默认值为270（左）。 0 =顶部 45 =右上角 90 =对 135 =右下角 180 =底部 225 =左下角 270 =左 315 =左上角

Sr.No.

参数和描述

color

你想要阴影的颜色。

direction

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

0 =顶部

45 =右上角

90 =对

135 =右下角

180 =底部

225 =左下角

270 =左

315 =左上角

例子 (Example)

<html>
   <head>
   </head>
   <body>
      <p><b>Image Example:</b></p>
      <img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
      <p><b>Text Example:</b></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>

波浪效应

波浪效应用于给对象提供正弦波失真，使其看起来呈波浪状。此过滤器中可以使用以下参数 -

Sr.No.	参数和描述
1	add 值为1会将原始图像添加到波形图像，0则不会。
2	freq 波浪的数量。
3	light 波浪上的光强度（从0到100）。
4	phase 正弦波应该在何种程度上开始（从0到100）。
5	strength 波浪效应的强度。

例子 (Example)

<html>
   <head>
   </head>
   <body>
      <p><b>Image Example:</b></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><b>Text Example:</b></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.	参数和描述
1	xray 灰度和颜色深度变平。

例子 (Example)

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