CSS ::滤镜–文本和图像效果

  • Z时代
  • 2024-01-10
  • 分类：综合

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

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

阿尔法频道

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

序号参数及说明
1不透明度的级别。0是完全透明的，100是完全不透明的。
2finishopacity对象另一端的不透明度级别。
3样式不透明度渐变的形状.0 =均匀1 =线性2 =径向3 =矩形
4startX不透明度渐变开始的X坐标。
5startY不透明度渐变开始的Y坐标。
6finishX结束不透明度渐变的X坐标。
7finishY结束不透明度渐变的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。如果为false，则不会将图像添加到模糊图像中。
2方向迷离的方向，顺时针旋转，四舍五入为45度增量。默认值为270（左）.0 =顶部45 =右上方90 =右135 =右下方180 =底部225 =左下方270 =左315 =左上方
3强度模糊将扩展的像素数。默认值为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>

色度过滤器

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

序号参数及说明
1color您想要透明的颜色。

例子

<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（垂直）偏移和颜色处为对象创建阴影。

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

序号参数及说明
1color阴影的颜色，采用#RRGGBB格式。
2offX投影沿x轴从可视对象偏移的像素数。正整数将阴影向右移动，负整数将阴影向左移动。
3offY投影沿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>

翻转效果

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

序号参数及说明
1FlipH创建水平镜像
2FlipV创建垂直镜像

例子

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

发光效果

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

序号参数及说明
1color您想要发光的颜色。
2strength发光的强度（从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个灰度阴影。在此过滤器中使用以下参数-

序号参数及说明
1grayscale将对象的颜色转换为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>

遮罩效果

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

序号参数及说明
1color透明区域将变为的颜色。

例子

<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之间的过滤器。以下参数可以在此过滤器中使用-

序号参数及说明
1color您希望阴影成为的颜色。
2方向迷离的方向，顺时针旋转，四舍五入为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没有。
2freq波数。
3light波浪上的光强度（从0到100）。
4相位正弦波应以什么程度开始（从0到100）。
5strength（强度）波浪效果的强度。

例子

<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射线效果可灰阶并展平颜色深度。在此过滤器中使用以下参数：

序号参数及说明
1X射线灰度并展平颜色深度。

例子

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

以上是 CSS ::滤镜–文本和图像效果 的全部内容， 来源链接： utcz.com/z/345883.html

回到顶部