话说CSS滤镜

最新推荐文章于 2024-05-28 15:14:24 发布
最新推荐文章于 2024-05-28 15:14:24 发布
阅读量46 收藏
点赞数
原文链接：http://www.cnblogs.com/leonardleonard/archive/2004/11/04/1928559.html
版权
作者：http://www.swtv.com.cn/adjunct/nr/css/css.htm

Alpha 透明层次：
滤镜效果
语法：STYLE="filter:filtername(parameter1,parameter2,parameter3...)"
其中：filtername为滤镜的名称；parameter1,parameter2等为滤镜的参数。
滤镜名称及功能说明：

设置透明层次

语法：STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StarX=starX,Stary=STARy,
FinishX=finishX,FinishY=finishY)"
其中：Opacity 为起始值，取值为0-100，0为透明，100为原图；FinishOpacity 为目标值； 取值为0-3；StarX或Stary 为任意值。
例子如下：

FinishOpacity=100
参数Style=3Style=2Style=1Style=0
Opacity=100设置透明层次设置透明层次设置透明层次设置透明层次
Opacity=50设置透明层次设置透明层次设置透明层次设置透明层次
Opacity=20设置透明层次设置透明层次设置透明层次设置透明层次
Opacity=0设置透明层次设置透明层次设置透明层次设置透明层次
FinishOpacity=50
参数Style=3Style=2Style=1Style=0
Opacity=100设置透明层次设置透明层次设置透明层次设置透明层次
Opacity=50设置透明层次设置透明层次设置透明层次设置透明层次
Opacity=20设置透明层次设置透明层次设置透明层次设置透明层次
Opacity=0设置透明层次设置透明层次设置透明层次设置透明层次
FinishOpacity=20
参数Style=3Style=2Style=1Style=0
Opacity=100设置透明层次设置透明层次设置透明层次设置透明层次
Opacity=50设置透明层次设置透明层次设置透明层次设置透明层次
Opacity=20设置透明层次设置透明层次设置透明层次设置透明层次
Opacity=0设置透明层次设置透明层次设置透明层次设置透明层次
FinishOpacity=0
参数Style=3Style=2Style=1Style=0
Opacity=100设置透明层次设置透明层次设置透明层次设置透明层次
Opacity=50设置透明层次设置透明层次设置透明层次设置透明层次
Opacity=20设置透明层次设置透明层次设置透明层次设置透明层次
Opacity=0设置透明层次设置透明层次设置透明层次设置透明层次
Blur 创建高速度移动效果,既模糊效果

语法：STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
其中：Add 是否保留原效果，取值为0 or 1；Direction 为移动角度值，取值为0-315度，步长45度；Strength效果长度值，一般取5即可。
举例如下：

Direction= 0Strength=0Strength=5Strength=10Strength=20Strength=50Strength=100
Add=0移动效果移动效果移动效果移动效果移动效果移动效果
Add=1移动效果移动效果移动效果移动效果移动效果移动效果
Direction=90Strength=0Strength=5Strength=10Strength=20Strength=50Strength=100
Add=0移动效果移动效果移动效果移动效果移动效果移动效果
Add=1移动效果移动效果移动效果移动效果移动效果移动效果

使用Blur.css的方法

1、首先在文本编辑器中输入以下内容：
内容　注释（不必输入）
Blur { font-family : "Comic Sans MS";　　
color : #ffff00;　定义字体颜色。字体为黄色。
line-height :19pt;　定义行高
filter : Blur(Add=1,Direction=45,Strength=5)　滤镜内容仅此一行。这里定义高速度移动效果。
font-size : large;　定义字体大小。这里为大字体。
font-weight : bold;　定义字体重量。这里为粗体。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

2、存盘：
用Blur.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Blur.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td class="Blur">高速度移动效果</td></tr>
</Table>
或者
<span class="Blur">高速度移动效果</span>
结果为：
高速度移动效果


Chroma 使某种颜色透明：

Chroma 制作专用颜色透明
Chroma 制作专用颜色透明

语法：STYLE="filter:Chroma(Color=color)"
其中：Color=#rrggbb，任意。
例子：STYLE="filter:Chroma(Color=#FFFF00)" 让黄色透明。

DropShadow 创建对象的固定影子

语法：STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
其中：Color=#rrggbb，任意；OffX或OffY 分别为X或Y轴的偏离值；Positive 取值为0 or 1。
举例如下：

Positive=0OffY=-10OffY=-5OffY=0OffY=5OffY=10OffY=15
OffX=-10固定影子固定影子固定影子固定影子固定影子固定影子
OffX=-5固定影子固定影子固定影子固定影子固定影子固定影子
OffX=0固定影子固定影子固定影子固定影子固定影子固定影子
OffX=5固定影子固定影子固定影子固定影子固定影子固定影子
OffX=10固定影子固定影子固定影子固定影子固定影子固定影子
OffX=15固定影子固定影子固定影子固定影子固定影子固定影子
Positive=1OffY=-10OffY=-5OffY=0OffY=5OffY=10OffY=15
OffX=-10固定影子固定影子固定影子固定影子固定影子固定影子
OffX=-5固定影子固定影子固定影子固定影子固定影子固定影子
OffX=0固定影子固定影子固定影子固定影子固定影子固定影子
OffX=5固定影子固定影子固定影子固定影子固定影子固定影子
OffX=10固定影子固定影子固定影子固定影子固定影子固定影子
OffX=15固定影子固定影子固定影子固定影子固定影子固定影子

使用DropShadow.css的方法

1、首先在文本编辑器中输入以下内容：
内容　注释（不必输入）
DropShadow { font-family : "Comic Sans MS";　　
color : #ffff00;　定义字体颜色。字体为黄色。
line-height :19pt;　定义行高
filter : DropShadow(Color=#6699cc,OffX=5,OffY=5,Positive=1)　滤镜内容仅此一行。这里定义固定影子。
font-size : large;　定义字体大小。这里为大字体。
font-weight : bold;　定义字体重量。这里为粗体。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

2、存盘：
用DropShadow.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="DropShadow.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td class="DropShadow">固定影子</td></tr>
</Table>
或者
<span class="DropShadow">固定影子</span>
结果为：
固定影子

FlipH 创建水平镜像图片
FlipH 创建水平镜像图片

语法：STYLE="filter:FlipH"
例子：STYLE="filter:FlipH"

boys1.gifboys1.gif
原图处理后的图



FlipV 创建垂直镜像图片
FlipV 创建垂直镜像图片

语法：STYLE="filter:FlipV"
例子：STYLE="filter:FlipV"

boys1.gifboys1.gif
原图处理后的图


Glow 在对象的外边缘加光辉

语法：STYLE="filter:Glow(Color=color,Strength=strength)"
其中：Color=#rrggbb，发光颜色，任意；Strength 为发光强度，取值为0-100。
举例如下：

Strength=0Strength=5Strength=10Strength=20Strength=50Strength=100
光辉光辉光辉光辉光辉光辉

 

使用Glow.css的方法

1、首先在文本编辑器中输入以下内容：
内容　注释（不必输入）
Glow { font-family : "Comic Sans MS";　　
color : #ffff00;　定义字体颜色。字体为黄色。
line-height :19pt;　定义行高
filter : Glow(Color=#FF0000,strength=4)　滤镜内容仅此一行。这里定义光辉颜色为红色，发光强度为4。
font-size : large;　定义字体大小。这里为大字体。
font-weight : bold;　定义字体重量。这里为粗体。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

2、存盘：
用Glow.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="glow.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td class="glow">在对象的外边缘加光辉</td></tr>
</Table>
或者
<span class="glow">在对象的外边缘加光辉</span>
结果为：
在对象的外边缘加光辉


Gray 把图片/文字灰度化
Gray 把图片/文字灰度化

语法：STYLE="filter:Gray"
例子：STYLE="filter:Gray"

 

使用Gray.css的方法

1、首先在文本编辑器中输入以下内容：
内容　注释（不必输入）
Gray { font-family : "Comic Sans MS";　　
color : #ffff00;　定义字体颜色。字体为黄色。
line-height :19pt;　定义行高
filter : Gray　滤镜内容仅此一行。这里定义灰度。
font-size : large;　定义字体大小。这里为大字体。
font-weight : bold;　定义字体重量。这里为粗体。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

2、存盘：
用Gray.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Gray.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td ><img class="Gray" src="图片"></td></tr>
</Table>
或者
<Table><tr>
<td class="Gray">把图片/文字灰度化</td></tr>
</Table>
或者
<img class="Gray" src="图片">
或者
<span class="Gray">把图片/文字灰度化</span>
结果为：

boys1.gifboys1.gif
处理前处理后



Invert 反色
Invert 反色

语法：STYLE="filter:Invert"
例子：STYLE="filter:Invert"

使用Invert.css的方法

1、首先在文本编辑器中输入以下内容：
内容　注释（不必输入）
Invert { font-family : "Comic Sans MS";　　
color : #ffff00;　定义字体颜色。字体为黄色。
line-height :19pt;　定义行高
filter : Invert　滤镜内容仅此一行。这里定义反色。
font-size : large;　定义字体大小。这里为大字体。
font-weight : bold;　定义字体重量。这里为粗体。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

2、存盘：
用Invert.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Invert.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td ><img class="Invert" src="图片"></td></tr>
</Table>
或者
<Table><tr>
<td class="Invert">反色</td></tr>
</Table>
或者
<img class="Invert" src="图片">
或者
<span class="Invert">反色</span>
结果为：

boys1.gifboys1.gif
处理前处理后


Mask 创建透明遮掩膜在对象上
Mask 创建透明遮掩膜在对象上

语法：STYLE="filter:Mask(Color=color)"
其中：Color=#rrggbb，任意。
例子：STYLE="filter:Mask(Color=#ffffe0)"

 

使用Mask.css的方法

1、首先在文本编辑器中输入以下内容：
内容　注释（不必输入）
Mask { font-family : "Comic Sans MS";　　
color : #ffff00;　定义字体颜色。字体为黄色。
line-height :19pt;　定义行高
filter : Mask(Color=#ffffe0)　滤镜内容仅此一行。这里定义透明遮掩膜。
font-size : large;　定义字体大小。这里为大字体。
font-weight : bold;　定义字体重量。这里为粗体。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

2、存盘：
用Mask.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Mask.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td class="Mask">透明遮掩膜</td></tr>
</Table>
或者
<span class="Mask">透明遮掩膜</span>
或者
<img src="图片" class="Mask">
结果为：

boys1.gifboys1.gif
变化前变化后



Shadow 创建偏移固定影子

语法：STYLE="filter:Shadow(Color=color,Direction=direction)"
其中：Color=#rrggbb，任意；Direction 为角度值，取值为0-315度，步长45度。
举例如下：

Direction=45固定影子
Direction=315固定影子

 

使用Shadow.css的方法

1、首先在文本编辑器中输入以下内容：
内容　注释（不必输入）
Shadow { font-family : "Comic Sans MS";　　
color : #00ff00;　定义字体颜色。字体为绿色。
line-height :19pt;　定义行高
filter : Shadow(Color=#6699cc,Direction=135)　滤镜内容仅此一行。这里定义固定影子。
font-size : large;　定义字体大小。这里为大字体。
font-weight : bold;　定义字体重量。这里为粗体。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

2、存盘：
用Shadow.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Shadow.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td class="Shadow">固定影子</td></tr>
</Table>
或者
<span class="Shadow">固定影子</span>
结果为：
固定影子


Wave 创建波纹效果

语法：STYLE="filter:Wave(Add=add,Freq=freq,LightStrength=lightstrength,Phase=phase,Strength=strength)"
其中：Add取值为0 or 1;Freq变形值；LightStrength变形百分比；Phase 角度变形百分比；Strength变形强度。
举例如下：

变形百分比对比

Strength=2
Freq=5
Phase=无		LightStrength=0LightStrength=5LightStrength=10LightStrength=20LightStrength=50LightStrength=100
Add=0波纹效果波纹效果波纹效果波纹效果波纹效果波纹效果
Add=1波纹效果波纹效果波纹效果波纹效果波纹效果波纹效果

角度变形百分比对比

Strength=2
Freq=5
LightStrength=无		Phase=0Phase=5Phase=10Phase=20Phase=50Phase=100
Add=0波纹效果波纹效果波纹效果波纹效果波纹效果波纹效果
Add=1波纹效果波纹效果波纹效果波纹效果波纹效果波纹效果

变形强度对比

Freq=5
LightStrength=5
Phase=4		Strength=0Strength=5Strength=10Strength=20Strength=50Strength=100
Add=0波纹效果波纹效果波纹效果波纹效果波纹效果波纹效果
Add=1波纹效果波纹效果波纹效果波纹效果波纹效果波纹效果

变形值对比

LightStrength=5
Phase=4
Strength=2		Freq=0Freq=5Freq=10Freq=20Freq=50Freq=100
Add=0波纹效果波纹效果波纹效果波纹效果波纹效果波纹效果
Add=1波纹效果波纹效果波纹效果波纹效果波纹效果波纹效果

 

使用Wave.css的方法

1、首先在文本编辑器中输入以下内容：
内容　注释（不必输入）
Wave { font-family : "Comic Sans MS";　　
color : #ffff00;　定义字体颜色。字体为黄色。
line-height :19pt;　定义行高
filter : Wave(Add=0,Freq=5,LightStrength=5,Phase=4,Strength=2)　滤镜内容仅此一行。
font-size : large;　定义字体大小。这里为大字体。
font-weight : bold;　定义字体重量。这里为粗体。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

2、存盘：
用Wave.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Wave.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td class="Wave">波纹效果</td></tr>
</Table>
或者
<span class="Wave">波纹效果</span>
或者
<img src="图形" class="Wave">
结果为：

boys1.gifboys1.gif
变化前变化后


Xray 使对象变的像被X光照射一样
Xray 使对象变的像被X光照射一样

语法：STYLE="filter:Xray"
例子：STYLE="filter:Xray"

 

使用Xray.css的方法

1、首先在文本编辑器中输入以下内容：
内容　注释（不必输入）
Xray { font-family : "Comic Sans MS";　　
color : #ffff00;　定义字体颜色。字体为黄色。
line-height :19pt;　定义行高
filter : Xray　滤镜内容仅此一行。这里定义X光照射。
font-size : large;　定义字体大小。这里为大字体。
font-weight : bold;　定义字体重量。这里为粗体。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

2、存盘：
用Xray.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Xray.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td class="Xray">X光照射</td></tr>
</Table>
或者
<span class="Xray">X光照射</span>
或者
<img src="图片" class="Xray">
结果为：

boys1.gifboys1.gif
变化前变化后

转载于:https://www.cnblogs.com/leonardleonard/archive/2004/11/04/1928559.html

aome1470
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端必修技能：高手进阶核心知识分享 - 三万字帮你搞定CSS动画(形变动画、过渡动画、关键帧动画）
uu0216的博客
07-11 1513
transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。3D转换元素，还可以更改元素的Z轴。注意： 使用此属性必须先使用transform属性。transition 属性允许你在元素状态改变时控制过渡效果。它可以让你在元素从一种样式变换到另一种样式时产生平滑的过渡效果，比如从一种颜色渐变到另一种颜色，或者从隐藏到显示。transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。
遇见CSS3滤镜
03-04
“滤镜效果是一个图形化的操作，它被应用到一个元素上以绘制到页面文档里。它是一种基于图像的效果，因为它接受零个或多个图像作为输入，指定若干效果的具体参数，然后产生图像作为输出。“现在，至少在这一点上，我...
由置灰引出的css滤镜filter是什么东西？
CoffeeAndIce的博客
12-04 516
主要为css参数 filter的应用内容
CSS 穿墙术，太强了
零一的博客
05-24 2624
大家好，我是零一，今天给大家分享 CSS 中一个神奇的属性：filter，为什么说它神奇？正如我标题所说的，我突然发现它能帮我们轻松实现 穿墙特效，类似这种的👇 看起来就跟我们在科幻电影里看到的经过一个穿梭门时的效果一样，真的很酷！然而这个效果对于开发者来说毫无难度，因为只设置了两个属性 从这个例子引出的 CSS 中超级牛逼的 filter 属性，到底还有哪些牛逼属性呢？一起来了解一下！ filter 支持的属性 借用了一下 MDN 上的例子，filter 一共支持以下这些属性： filter: blur
CSS绝对定位absolute详解
qq_27891995的博客
12-24 526
之前介绍过CSS浮动float详解，本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float，对理解绝对定位absolute会大有帮助。 先说absolute和float的相似处：包裹性 和 高度欺骗 包裹性 所谓一图胜千言（唯一的区别是：下图的div增加了absolute） 一旦给元素加上absolute或float就相当于给元素加上了disp...
CSS学习笔记之高级教程（三）
wz_1992的博客
05-28 739
14、CSS 图像样式 14.1 圆角图像：border-radius .img01 { width: 200px; height: auto; /* 四个角一致的圆角 */ border-radius: 10px; } 14.2 圆形 .img02 { width: 200px; height: auto; /* 圆形 */ border-radius: 50%; } 14.3
css3实现一些炫酷的东西
Theflashdye的博客
10-26 2832
CSS3一些炫酷的东西
滤镜模糊效果
huntererer的博客
02-13 779
filter滤镜可以制作模糊效果，但是兼容性很不好 那么如何为其他版本的浏览器量身打造模糊效果呢？先看效果图： 情人节要到了，给妹子写几个页面，这是其中一个照片墙的效果，点击一张照片的时候将这个照片放大居中显示，而底下加了一个模糊效果，是不是比一般的遮罩层的单一颜色加opacity要高大上呢！其他细节不说，单说这个模糊效果的class: .blur { fi
Div+CSS规则整理
zxdxyz的专栏
11-19 829
一、           善用css缩写规则     /*注意上、右、下、左的书写顺序*/ 1.      关于边距（4边）： 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px    （省略的左等于右） 1px 2px         (省略的上等于下) 1px            （四边都相同）   2.      简化所有： */ body{mar
【CSS3进阶】酷炫的3D旋转透视
xiaoshengjinbu的博客
08-03 263
之前学习 react+webpack ，偶然路过webpack 官网，看到顶部的 LOGO ，就很感兴趣。 最近觉得自己 CSS3 过于薄弱，想着深入学习一番，遂以这个 LOGO 为切入口，好好研究学习了一下相关的 CSS3 属性。webpack 的 LOGO 动画效果乍看不是很难，深入了解之后，觉得内部其实大有学问，自己折腾了一番，做了一系列相关的 CSS3 动画效果。 先上demo，...
css滤镜属性语法介绍
10-30
### CSS滤镜属性语法介绍 #### 一、概述 CSS滤镜是一种强大的视觉效果工具，允许开发者通过简单的代码实现图像处理功能，如模糊、阴影、色彩调整等效果。本文将详细介绍CSS滤镜属性的语法及各种滤镜效果的使用方法...
CSS 各种滤镜代码解释 用法案例
09-27
CSS滤镜是一种强大的工具，允许开发者对网页元素的视觉效果进行增强或改变。它们通过应用一系列的图像处理操作，如模糊、反转颜色、添加阴影等，来改变元素的外观。以下是对标题和描述中提到的各种CSS滤镜的详细解释...
CSS 避免使用滤镜
09-25
在讨论CSS样式的应用时，一个重要的知识点是关于避免使用滤镜，尤其是针对旧版本的Internet Explorer（IE）浏览器。滤镜属性在IE中特指AlphaImageLoader滤镜，这是一个专门用于修正IE 7.0以下版本中PNG图片半透明...
CSS滤镜效果大全
07-15
### CSS滤镜效果大全 #### 一、Alpha滤镜 - 设置透明度 Alpha滤镜用于控制元素的透明度。此滤镜提供了丰富的参数配置来实现不同程度的透明效果，包括简单的透明度调整到复杂的渐变透明。 - **表达格式**： ```...
VB+ACCESS户籍管理系统(论文+系统).zip
最新发布
08-16
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
TCL TC19T电磁炉原理图.rar
08-16
TCL TC19T电磁炉原理图
全球与中国活塞式压缩机市场现状及未来发展趋势（2024版）.docx
08-16
全球与中国活塞式压缩机市场现状及未来发展趋势（2024版）.docx
Qt5.9 C++开发指南示例代码
08-16
时间日期与定时器
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值