当前位置：极客教程 > CSS > CSS 精品教程 > CSS滤镜 文本和图像效果

CSS滤镜 文本和图像效果

CSS滤镜 文本和图像效果

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

在本章中，我们将了解每个CSS滤镜的详细信息。这些滤镜可能在您的浏览器中无法正常工作。

Alpha通道

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

序号 参数和描述
1 opacity 不透明度级别。0表示完全透明，100表示完全不透明。
2 finishopacity 对象另一端的不透明度级别。
3 style 不透明度渐变的形状。 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 = "https://deepinout.com/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>

它将产生以下结果 −

CSS滤镜 文本和图像效果

运动模糊

运动模糊用于在特定方向和强度下创建模糊的图片或文本。可以在此滤镜中使用以下参数 −

表格：

序号 参数和描述
1 add True或false。如果为true，则将图像添加到模糊图像中；如果为false，则不将图像添加到模糊图像中。
2 direction 模糊的方向，以顺时针方向计算，每45度为一段。默认值为270（左）。 0 = 顶部 45 = 右上 90 = 右侧 135 = 右下 180 = 底部 225 = 左下 270 = 左侧 315 = 左上
3 strength 模糊将延伸的像素数。默认值为5个像素。

示例

<html>
   <head>
   </head>

   <body>
      <p> Image Example:</p>

      <img src = "https://deepinout.com/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>

它将产生以下结果 −

CSS滤镜 文本和图像效果

色度滤镜

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

序号 参数和描述
1 color 你想要透明的颜色。

示例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "https://deepinout.com/logo.png" 
         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>

这将产生以下结果−

CSS滤镜 文本和图像效果

投影阴影效果

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

以下参数可在此滤镜中使用−

序号 参数和描述
1 color 阴影的颜色，以#RRGGBB格式表示。
2 offX 阴影距离可视对象的像素数在x轴上的偏移量。正整数将阴影向右移动，负整数将阴影向左移动。
3 offY 阴影距离可视对象的像素数在y轴上的偏移量。正整数将阴影向下移动，负整数将阴影向上移动。
4 positive 如果为true，则对象的所有不透明像素都有阴影。如果为false，则所有透明像素都有阴影。默认值为true。

示例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "https://deepinout.com/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>

它将产生以下结果 –

CSS滤镜 文本和图像效果

翻转效果

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

编号 参数与说明
1 FlipH 创建一个水平镜像
2 FlipV 创建一个垂直镜像

示例

<html>
   <head>
   </head>

   <body>
      <p>Image Example: </p>

      <img src = "https://deepinout.com/logo.png" 
         alt = "CSS Logo" 
         style = "filter: FlipH">

      <img src = "https://deepinout.com/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>

它将产生以下结果−

CSS滤镜 文本和图像效果

Glow（发光）效果

Glow（发光）效果用于在物体周围产生发光效果。如果是透明图像，则在不透明像素周围产生发光效果。可以使用以下参数来应用该滤镜−

序号 参数&描述
1 color 您希望辉光的颜色。
2 strength 辉光的强度（从1到255）。

示例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "https://deepinout.com/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>

它将产生以下结果 −

CSS滤镜 文本和图像效果

灰度效果

灰度效果用于将对象的颜色转换为256个灰阶。在这个滤镜中使用了以下参数−

编号 参数和描述
1 grayscale 将对象的颜色转换为256个灰度色调。

示例

<html>
   <head>
   </head>

   <body>
      <p>Image Example: </p>

      <img src = "https://deepinout.com/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>

它将产生如下结果−

CSS滤镜 文本和图像效果

反转效果

反转效果用于将对象的颜色映射为它们在颜色光谱中的相反值，即创建一个负像。该滤镜使用以下参数−

序号 参数 & 描述
1 Invert 将对象的颜色映射为它们在颜色光谱中的相反值。

示例

<html>
   <head>
   </head>

   <body>
      <p> Image Example:</p>

      <img src = "https://deepinout.com/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>

它将产生以下结果 −

CSS滤镜 文本和图像效果

遮罩效果

遮罩效果用于将透明像素转换为指定的颜色，并将不透明像素转换为透明。此滤镜中使用以下参数 −

Sr.No. 参数及说明
1 color 透明区域将变成的颜色。

示例

<html>
   <head>
   </head>

   <body>
      <p> Image Example:</p>

      <img src = "https://deepinout.com/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>

它将产生以下结果：

CSS滤镜 文本和图像效果

阴影滤镜

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

序号 参数及描述
1 color 您希望阴影的颜色。
2 direction 模糊的方向，按顺时针方向，以45度为增量。默认值为270（左）。
0 = 顶部
45 = 右上角
90 = 右侧
135 = 右下角
180 = 底部
225 = 左下角
270 = 左侧
315 = 左上角

示例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "https://deepinout.com/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>

它将会产生以下结果 −

CSS滤镜 文本和图像效果

波浪效果

波浪效果用于给物体添加正弦波形失真，使其看起来像波浪一样。可以使用以下参数来使用此滤镜−

Sr.No. 参数与描述
1 add 值为1时将原始图像添加到波浪图像中，值为0时不添加。
2 freq 波浪的数量。
3 light 波浪上的光强度（从0到100）。
4 phase 正弦波应该从哪个角度开始（从0到100）。
5 strength 波浪效果的强度。

示例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "https://deepinout.com/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>

它会产生以下结果-

CSS滤镜 文本和图像效果

X射线效果

X射线效果灰度化并平坦化颜色深度。在此滤镜中使用以下参数：

序号 参数和描述
1 xray 灰度处理并降低颜色深度。

示例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "https://deepinout.com/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滤镜 文本和图像效果

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

CSS 精品教程