您可以使用CSS过滤器将特殊效果添加到文本,图像和网页的其他方面,而无需使用图像或其他图形。
Alpha通道滤镜会更改对象的透明度,从而使其融合到背景中, 以下参数可以在此过滤器中使用-
Sr.No. | Parameter & Remark |
---|---|
1 | opacity 透明度。 0是完全透明的,100是完全不透明的。 |
2 | finishopacity 对象另一端的不透明度级别。 |
3 | style 不透明度渐变的形状。 0 = uniform 1 = linear 2 = radial 3 = rectangular |
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 Learnfk</div> </body> </html>
它将产生以下输出-
Motion 模糊用于创建具有方向和强度的模糊图片或文本。 以下参数可以在此过滤器中使用-
Sr.No. | Parameter & Remark |
---|---|
1 | add True或False。如果为true,则将图像添加到模糊图像;否则为false。如果为false,则不会将图像添加到模糊图像中。 |
2 | direction 模糊的方向(顺时针方向)四舍五入为45度增量。默认值为270(左)。 0 =Top 45 =Top right 90 =Right 135 =Bottom right 180 =Bottom 225 =Bottom left 270 =Left 315 =Top left |
3 | strength 模糊将扩展的像素数。默认值为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 Learnfk </div> </body> </html>
它将产生以下输出-
色度滤镜(Chroma Filter)用于使任何特定颜色透明,通常与图像一起使用,您也可以将其与滚动条一起使用。 以下参数可以在此过滤器中使用-
Sr.No. | Parameter & Remark |
---|---|
1 | color 您想要透明的颜色。 |
<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 Learnfk</div> </body> </html>
它将产生以下输出-
以下参数可以在此过滤器中使用-
Sr.No. | Parameter & Remark |
---|---|
1 | color 阴影的颜色,采用#RRGGBB格式。 |
2 | offX 阴影沿x轴从可视对象偏移的像素数。正整数将阴影向右移动,负整数将阴影向左移动。 |
3 | offY 阴影沿y轴从可视对象偏移的像素数。正整数将阴影向下移动,负整数将阴影向上移动。 |
4 | positive 如果为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 Learnfk</div> </body> </html>
它将产生以下输出-
翻转效果用于创建对象的镜像。 以下参数可以在此过滤器中使用-
Sr.No. | Parameter & Remark |
---|---|
1 | FlipH 创建水平镜像 |
2 | FlipV 创建垂直镜像 |
<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 Learnfk</div> </body> </html>
它将产生以下输出-
Glow效果用于在对象周围创建发光。 如果它是透明图像,则会在其不透明像素周围创建光晕。 以下参数可以在此过滤器中使用-
Sr.No. | Parameter & Remark |
---|---|
1 | color 您想要发光的颜色。 |
2 | strength 发光强度(从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 Learnfk</div> </body> </html>
它将产生以下输出-
灰度效果用于将对象的颜色转换为256个灰度阴影。在此过滤器中使用以下参数-
Sr.No. | Parameter & Remark |
---|---|
1 | grayscale 将对象的颜色转换为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 Learnfk</div> </body> </html>
它将产生以下输出-
反转效果用于将对象的颜色映射到它们的相反值。在此过滤器中使用以下参数-
Sr.No. | Parameter & Remark |
---|---|
1 | Invert 将对象的颜色映射到色谱中它们的相反值。 |
<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 Learnfk</div> </body> </html>
它将产生以下输出-
遮罩效果用于将透明像素变为指定的颜色,并使不透明像素透明。在此过滤器中使用以下参数-
Sr.No. | Parameter & Remark |
---|---|
1 | color 透明区域将变为的颜色。 |
<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 Learnfk </div> </body> </html>
它将产生以下输出-
阴影滤镜用于在指定的方向和颜色上创建衰减的阴影。 这是位于Dropshadow和Glow之间的过滤器。 以下参数可以在此过滤器中使用-
Sr.No. | Parameter & Remark |
---|---|
1 | color 您希望阴影成为的颜色。 |
2 | direction 模糊的方向(顺时针方向)四舍五入为45度增量。默认值为270(左)。 0=Top 45=Top right 90=Right 135=Bottom right 180=Bottom 225 =Bottom left 270 =Left 315 =Top left |
<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 Learnfk </div> </body> </html>
它将产生以下输出-
波浪效应用于使对象产生正弦波失真,使其看起来呈波浪形。 以下参数可以在此过滤器中使用-
Sr.No. | Parameter & Remark |
---|---|
1 | add 值为1会将原始图像添加到波形图像,而值为0则不会。 |
2 | freq 波数。 |
3 | light 波浪上的光强度(从0到100)。 |
4 | phase 正弦波应从什么Angular开始(从0到100)。 |
5 | strength 波浪效应的强度。 |
<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 Learnfk </div> </body> </html>
它将产生以下输出-
X射线效果可灰阶并弄平颜色深度。在此过滤器中使用以下参数:
Sr.No. | Parameter & Remark |
---|---|
1 | xray 灰度并展平颜色深度。 链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-text-effects.html 来源:LearnFk无涯教程网 |
<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 Learnfk </div> </body> </html>
它将产生以下输出-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)