图片技巧--图片滤镜

프로필KEEKYOの第二空间站사진블로그리스트

도구

도움말

< 이전 다음 >

12월 4일

图片技巧--图片滤镜

①原图：

②柔边效果——均匀：

③柔边效果——线状（左往右）：

④柔边效果——圆形（外往中央）：

⑤柔边效果——长方形（中央往外）：

⑥诙谐效果：

⑦X光效果：

⑧色彩对换：

⑨左右翻转：

⑩上下翻转：

⑪发光效果：

⑫附阴影效果：

⑬投射阴影效果：

⑭波形效果：

⑮模糊效果：

滤镜：它只是一种CSS里可用的滤镜样式(Style Sheet)而已。

HTML叙述：

无属性：<标签名称>内容</标签名称>

单属性：<标签名称属性名称＝“值”>内容</标签名称>

多属性：<标签名称属性名称1＝“值” 属性名称2＝“值”>内容</标签名称>

（依次类推）

*重要的是：内容要被标签名称所包夹

*标签名称及属性名称和值，英文大小写无差别

*要设定多个属性时，必须以空格来表示间隔

标签名称如：

a       ->超链接 img    ->图片 u       ->底线 i        ->斜体
font   ->字型    b        ->粗体 p        ->段落 div     ->段落
br      ->断行

例如：

<IMG SRC="sample.gif"></IMG> -------->显示图片</IMG>可省略
<A HREF="网址">內容</A> ------->設定內容超链接位置</A>不能省略
如果不知道</标签名称>是否要省略，那就加上去吧，不会有错的。

Style Sheet叙述：

<标签名称 style="样式名称:值">内容</标签名称>

各种滤镜样式的详细描述情形：

滤镜的样式名称为“filter”，所以

套用在图片上为：<IMG Style="filter:值">

套用在DIV上为：<DIV Style="filter:值;with:滤镜宽;with:滤镜高"><IMG></DIV>

为何使用DIV：因为上下边界无空白，可以替代IMG，且某些滤镜只能使用在DIV，多种效果要靠它，但使用DIV时必须设定宽度和高度。

*要设定多个参数时，必须以半角的逗号“,”来间隔

*图宽和图高只要在图片上按右键，内容可以得知

A.半透明合成：

lordzhu代码：

■参数：

opacity             -->设定起始处的透明度
finishOpacity     -->设定結束处的透明度
style                -->0:均勻、1:线状、2:圆形、3:长方形

图③效果代码：

或：

B.诙谐、Ｘ光效果、色彩对换(互补色)：

HTML代码：

诙谐:
<img src="图片" style="filter:Gray">
或
<div style="filter:Gray ;width:图宽;height:图高"><img src="图片"></div>

Ｘ光效果:
<img src="图片" style="filter:Xray">
或
<div style="filter:Xray ;width:图宽;height:图高"><img src="图片"></div>

色彩对换:
<img src="图片" style="filter:Invert">
或
<div style="filter:Invert ;width:图宽;height:图高"><img src="图片"></div>

■参数：无

图⑥效果代码：

或：

图⑦效果代码：

或：

图⑧效果代码：

或：

C.翻转：

HTML代码：

左右翻转:
<img src="图片" style="filter:FlipH">
或
<div style="filter:FlipH ;width:图宽;height:图高"><img src="图片"></div>

上下翻转:
<img src="图片" style="filter:FlipV">
或
<div style="filter:FlipV ;width:图宽;height:图高"><img src="图片"></div>

■参数：无

图⑨效果代码：

D.發光效果：

HTML代码：

■参数：

color -->发光颜色
strength -->发光强度
滤镜宽=图宽+发光强度x2
滤镜高=图高+发光强度x2+10

图⑪效果代码：

E.投射阴影效果：

lordzhu代码：

■参数：

color -->发光颜色
direction -->方向(45角度单位)(0、45、90、135、180、225、270、315)
滤镜宽=略大于图宽(建议:图宽+24)
滤镜高=略大于图高(建议:图高+24+10)

图⑬效果代码：

F.附阴影效果：

HTML代码：

■参数：

color             -->发光颜色
offX              -->水平位移(可正负)
offY              -->垂直位移(可正负)
滤镜宽=图宽+水平位移绝对值+10
滤镜高=图高+垂直位移绝对值+10+10

图⑫效果代码：

G.模糊效果：

HTML代码：

■参数：

direction -->方向(45角度单位)(0、45、90、135、180、225、270、315)
滤镜宽=略大于图宽(建议:图宽+15)
滤镜高=略大于图高(建议:图高+15+10)

图⑮效果代码：

H.波形效果：

HTML代码：

■参数：

freq                -->频率(0+)
strength         -->振幅强度(0+)
lightstrength -->波峰强度(0~100)越高越黑
phase             -->起始相位(0~100)
滤镜宽=图宽+振幅强度x2
滤镜高=图高+振幅强度x2+10

图⑭效果代码：

多重效果范例：

HTML代码：（波形加上半透明合成）

오전 10:24 | 스크랩

댓글을 추가하려면 Windows Live ID로 로그인하세요. 핫메일, 메신저 또는 Xbox LIVE를 사용하는 경우 해당 계정을 Windows Live ID로 사용할 수 있습니다.로그인

Windows Live ID가 없으신가요? 등록

트랙백

이 블로그의 트랙백 URL은 다음과 같습니다.

http://lavielee.spaces.live.com/blog/cns!B6BC2C95FD28881C!119.trak

이 블로그를 참조하는 웹 로그

없음