日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) > 人文社科 > 生活经验 >内容正文

生活经验

话说CSS滤镜

發(fā)布時(shí)間：2023/11/27 生活经验 27 豆豆
生活随笔 收集整理的這篇文章主要介紹了 话说CSS滤镜 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
作者：http://www.swtv.com.cn/adjunct/nr/css/css.htm

Alpha 透明層次：
濾鏡效果
語(yǔ)法：STYLE="filter:filtername(parameter1,parameter2,parameter3...)"
其中：filtername為濾鏡的名稱；parameter1,parameter2等為濾鏡的參數(shù)。
濾鏡名稱及功能說(shuō)明：

設(shè)置透明層次

語(yǔ)法：STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StarX=starX,Stary=STARy,
FinishX=finishX,FinishY=finishY)"
其中：Opacity 為起始值，取值為0-100，0為透明，100為原圖；FinishOpacity 為目標(biāo)值； 取值為0-3；StarX或Stary 為任意值。
例子如下：

FinishOpacity=100
參數(shù)Style=3Style=2Style=1Style=0
Opacity=100設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
Opacity=50設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
Opacity=20設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
Opacity=0設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
FinishOpacity=50
參數(shù)Style=3Style=2Style=1Style=0
Opacity=100設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
Opacity=50設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
Opacity=20設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
Opacity=0設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
FinishOpacity=20
參數(shù)Style=3Style=2Style=1Style=0
Opacity=100設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
Opacity=50設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
Opacity=20設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
Opacity=0設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
FinishOpacity=0
參數(shù)Style=3Style=2Style=1Style=0
Opacity=100設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
Opacity=50設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
Opacity=20設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次
Opacity=0設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次設(shè)置透明層次

Blur 創(chuàng)建高速度移動(dòng)效果,既模糊效果

語(yǔ)法：STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
其中：Add 是否保留原效果，取值為0 or 1；Direction 為移動(dòng)角度值，取值為0-315度，步長(zhǎng)45度；Strength效果長(zhǎng)度值，一般取5即可。
舉例如下：

Direction= 0Strength=0Strength=5Strength=10Strength=20Strength=50Strength=100
Add=0移動(dòng)效果移動(dòng)效果移動(dòng)效果移動(dòng)效果移動(dòng)效果移動(dòng)效果
Add=1移動(dòng)效果移動(dòng)效果移動(dòng)效果移動(dòng)效果移動(dòng)效果移動(dòng)效果
Direction=90Strength=0Strength=5Strength=10Strength=20Strength=50Strength=100
Add=0移動(dòng)效果移動(dòng)效果移動(dòng)效果移動(dòng)效果移動(dòng)效果移動(dòng)效果
Add=1移動(dòng)效果移動(dòng)效果移動(dòng)效果移動(dòng)效果移動(dòng)效果移動(dòng)效果

使用Blur.css的方法

1、首先在文本編輯器中輸入以下內(nèi)容：
內(nèi)容　注釋（不必輸入）
Blur { font-family : "Comic Sans MS";　　
color : #ffff00;　定義字體顏色。字體為黃色。
line-height :19pt;　定義行高
filter : Blur(Add=1,Direction=45,Strength=5)　濾鏡內(nèi)容僅此一行。這里定義高速度移動(dòng)效果。
font-size : large;　定義字體大小。這里為大字體。
font-weight : bold;　定義字體重量。這里為粗體。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

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

3、修改需要引用該文件的html文件:
在主頁(yè)的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Blur.css">
在主頁(yè)的<Body></Body>中加上：
<Table><tr>
<td class="Blur">高速度移動(dòng)效果</td></tr>
</Table>
或者
<span class="Blur">高速度移動(dòng)效果</span>
結(jié)果為：
高速度移動(dòng)效果


Chroma 使某種顏色透明：

Chroma 制作專用顏色透明
Chroma 制作專用顏色透明

語(yǔ)法：STYLE="filter:Chroma(Color=color)"
其中：Color=#rrggbb，任意。
例子：STYLE="filter:Chroma(Color=#FFFF00)" 讓黃色透明。

DropShadow 創(chuàng)建對(duì)象的固定影子

語(yǔ)法：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、首先在文本編輯器中輸入以下內(nèi)容：
內(nèi)容　注釋（不必輸入）
DropShadow { font-family : "Comic Sans MS";　　
color : #ffff00;　定義字體顏色。字體為黃色。
line-height :19pt;　定義行高
filter : DropShadow(Color=#6699cc,OffX=5,OffY=5,Positive=1)　濾鏡內(nèi)容僅此一行。這里定義固定影子。
font-size : large;　定義字體大小。這里為大字體。
font-weight : bold;　定義字體重量。這里為粗體。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

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

3、修改需要引用該文件的html文件:
在主頁(yè)的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="DropShadow.css">
在主頁(yè)的<Body></Body>中加上：
<Table><tr>
<td class="DropShadow">固定影子</td></tr>
</Table>
或者
<span class="DropShadow">固定影子</span>
結(jié)果為：
固定影子

FlipH 創(chuàng)建水平鏡像圖片
FlipH 創(chuàng)建水平鏡像圖片

語(yǔ)法：STYLE="filter:FlipH"
例子：STYLE="filter:FlipH"

原圖處理后的圖



FlipV 創(chuàng)建垂直鏡像圖片
FlipV 創(chuàng)建垂直鏡像圖片

語(yǔ)法：STYLE="filter:FlipV"
例子：STYLE="filter:FlipV"

原圖處理后的圖


Glow 在對(duì)象的外邊緣加光輝

語(yǔ)法：STYLE="filter:Glow(Color=color,Strength=strength)"
其中：Color=#rrggbb，發(fā)光顏色，任意；Strength 為發(fā)光強(qiáng)度，取值為0-100。
舉例如下：

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

?

使用Glow.css的方法

1、首先在文本編輯器中輸入以下內(nèi)容：
內(nèi)容　注釋（不必輸入）
Glow { font-family : "Comic Sans MS";　　
color : #ffff00;　定義字體顏色。字體為黃色。
line-height :19pt;　定義行高
filter : Glow(Color=#FF0000,strength=4)　濾鏡內(nèi)容僅此一行。這里定義光輝顏色為紅色，發(fā)光強(qiáng)度為4。
font-size : large;　定義字體大小。這里為大字體。
font-weight : bold;　定義字體重量。這里為粗體。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

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

3、修改需要引用該文件的html文件:
在主頁(yè)的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="glow.css">
在主頁(yè)的<Body></Body>中加上：
<Table><tr>
<td class="glow">在對(duì)象的外邊緣加光輝</td></tr>
</Table>
或者
<span class="glow">在對(duì)象的外邊緣加光輝</span>
結(jié)果為：
在對(duì)象的外邊緣加光輝


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

語(yǔ)法：STYLE="filter:Gray"
例子：STYLE="filter:Gray"

?

使用Gray.css的方法

1、首先在文本編輯器中輸入以下內(nèi)容：
內(nèi)容　注釋（不必輸入）
Gray { font-family : "Comic Sans MS";　　
color : #ffff00;　定義字體顏色。字體為黃色。
line-height :19pt;　定義行高
filter : Gray　濾鏡內(nèi)容僅此一行。這里定義灰度。
font-size : large;　定義字體大小。這里為大字體。
font-weight : bold;　定義字體重量。這里為粗體。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

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

3、修改需要引用該文件的html文件:
在主頁(yè)的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Gray.css">
在主頁(yè)的<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>
結(jié)果為：

處理前處理后



Invert 反色
Invert 反色

語(yǔ)法：STYLE="filter:Invert"
例子：STYLE="filter:Invert"

使用Invert.css的方法

1、首先在文本編輯器中輸入以下內(nèi)容：
內(nèi)容　注釋（不必輸入）
Invert { font-family : "Comic Sans MS";　　
color : #ffff00;　定義字體顏色。字體為黃色。
line-height :19pt;　定義行高
filter : Invert　濾鏡內(nèi)容僅此一行。這里定義反色。
font-size : large;　定義字體大小。這里為大字體。
font-weight : bold;　定義字體重量。這里為粗體。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

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

3、修改需要引用該文件的html文件:
在主頁(yè)的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Invert.css">
在主頁(yè)的<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>
結(jié)果為：

處理前處理后

Mask 創(chuàng)建透明遮掩膜在對(duì)象上
Mask 創(chuàng)建透明遮掩膜在對(duì)象上

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

?

使用Mask.css的方法

1、首先在文本編輯器中輸入以下內(nèi)容：
內(nèi)容　注釋（不必輸入）
Mask { font-family : "Comic Sans MS";　　
color : #ffff00;　定義字體顏色。字體為黃色。
line-height :19pt;　定義行高
filter : Mask(Color=#ffffe0)　濾鏡內(nèi)容僅此一行。這里定義透明遮掩膜。
font-size : large;　定義字體大小。這里為大字體。
font-weight : bold;　定義字體重量。這里為粗體。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

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

3、修改需要引用該文件的html文件:
在主頁(yè)的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Mask.css">
在主頁(yè)的<Body></Body>中加上：
<Table><tr>
<td class="Mask">透明遮掩膜</td></tr>
</Table>
或者
<span class="Mask">透明遮掩膜</span>
或者
<img src="圖片" class="Mask">
結(jié)果為：

變化前變化后



Shadow 創(chuàng)建偏移固定影子

語(yǔ)法：STYLE="filter:Shadow(Color=color,Direction=direction)"
其中：Color=#rrggbb，任意；Direction 為角度值，取值為0-315度，步長(zhǎng)45度。
舉例如下：

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

?

使用Shadow.css的方法

1、首先在文本編輯器中輸入以下內(nèi)容：
內(nèi)容　注釋（不必輸入）
Shadow { font-family : "Comic Sans MS";　　
color : #00ff00;　定義字體顏色。字體為綠色。
line-height :19pt;　定義行高
filter : Shadow(Color=#6699cc,Direction=135)　濾鏡內(nèi)容僅此一行。這里定義固定影子。
font-size : large;　定義字體大小。這里為大字體。
font-weight : bold;　定義字體重量。這里為粗體。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

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

3、修改需要引用該文件的html文件:
在主頁(yè)的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Shadow.css">
在主頁(yè)的<Body></Body>中加上：
<Table><tr>
<td class="Shadow">固定影子</td></tr>
</Table>
或者
<span class="Shadow">固定影子</span>
結(jié)果為：
固定影子


Wave 創(chuàng)建波紋效果

語(yǔ)法：STYLE="filter:Wave(Add=add,Freq=freq,LightStrength=lightstrength,Phase=phase,Strength=strength)"
其中：Add取值為0 or 1;Freq變形值；LightStrength變形百分比；Phase 角度變形百分比；Strength變形強(qiáng)度。
舉例如下：

變形百分比對(duì)比

Strength=2
Freq=5
Phase=無(wú)		LightStrength=0LightStrength=5LightStrength=10LightStrength=20LightStrength=50LightStrength=100
Add=0波紋效果波紋效果波紋效果波紋效果波紋效果波紋效果
Add=1波紋效果波紋效果波紋效果波紋效果波紋效果波紋效果

角度變形百分比對(duì)比

Strength=2
Freq=5
LightStrength=無(wú)		Phase=0Phase=5Phase=10Phase=20Phase=50Phase=100
Add=0波紋效果波紋效果波紋效果波紋效果波紋效果波紋效果
Add=1波紋效果波紋效果波紋效果波紋效果波紋效果波紋效果

變形強(qiáng)度對(duì)比

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

變形值對(duì)比

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

?

使用Wave.css的方法

1、首先在文本編輯器中輸入以下內(nèi)容：
內(nèi)容　注釋（不必輸入）
Wave { font-family : "Comic Sans MS";　　
color : #ffff00;　定義字體顏色。字體為黃色。
line-height :19pt;　定義行高
filter : Wave(Add=0,Freq=5,LightStrength=5,Phase=4,Strength=2)　濾鏡內(nèi)容僅此一行。
font-size : large;　定義字體大小。這里為大字體。
font-weight : bold;　定義字體重量。這里為粗體。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

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

3、修改需要引用該文件的html文件:
在主頁(yè)的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Wave.css">
在主頁(yè)的<Body></Body>中加上：
<Table><tr>
<td class="Wave">波紋效果</td></tr>
</Table>
或者
<span class="Wave">波紋效果</span>
或者
<img src="圖形" class="Wave">
結(jié)果為：

變化前變化后

Xray 使對(duì)象變的像被X光照射一樣
Xray 使對(duì)象變的像被X光照射一樣

語(yǔ)法：STYLE="filter:Xray"
例子：STYLE="filter:Xray"

?

使用Xray.css的方法

1、首先在文本編輯器中輸入以下內(nèi)容：
內(nèi)容　注釋（不必輸入）
Xray { font-family : "Comic Sans MS";　　
color : #ffff00;　定義字體顏色。字體為黃色。
line-height :19pt;　定義行高
filter : Xray　濾鏡內(nèi)容僅此一行。這里定義X光照射。
font-size : large;　定義字體大小。這里為大字體。
font-weight : bold;　定義字體重量。這里為粗體。
width : auto;　　
height : auto;　　
position : relative;　　
padding : 3pt;　　
}　　

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

3、修改需要引用該文件的html文件:
在主頁(yè)的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Xray.css">
在主頁(yè)的<Body></Body>中加上：
<Table><tr>
<td class="Xray">X光照射</td></tr>
</Table>
或者
<span class="Xray">X光照射</span>
或者
<img src="圖片" class="Xray">
結(jié)果為：

變化前變化后

總結(jié)

以上是生活随笔為你收集整理的话说CSS滤镜的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。