首先,先簡單介紹一下CSS用法給各位。
1.行內式(Inlin Style)排版樣式:(直接定義在原有的html標籤內)
標籤架構:
<tag style="property:value">Document</tage>
<標籤 樣式宣告="樣式名稱:設定值">文件</標籤>
範例:<font style="font-size: 20pt;color:green">你好</font>
範例:<DIV STYLE="position:absolute; width:20px; height:20px">嗨</DIV>
2.內崁式(Embedding Style)排版樣式:(定義在HEAD標籤內)
標籤架構:
(1)依附標籤
<style type="text/css">
h2 {CSS語法}
td,p {CSS語法}
</style>
只要在<body>...</body>間使用到<h2>、<td>、<p>這些標籤,將自動被套用。
基本上,第一種就是針對一個標籤,然後一次設定好幾個
樣式性質。
ex:
<style type="text/css">

body{font-size:9pt;
font-color:red;
background:white}

</style> 

第二種就是同時對好幾個標籤設定一樣的樣式性質。
ex:
<style type="text/css">

body{font-size:9pt;font-color:red;background:white}

</style>  

接下來分享今天我要分享的東西吧,
今天要分享的是如何改變圖片的效果,像是變透明或片灰暗之類的方法。

視 覺 化 濾 鏡 ( 只 適 用 於 I E 5 及 以 上 )

使 用 方 法
這個可以使用在 FONT,IMG,TABLE 等等原碼內。
請參考以下例子:
要有透明效果:  <p style="color:#FFF;background:#066;filter:alpha(opacity=50);">

 

1842305218.jpg


基 本 原 碼
灰階影像 {FILTER: Gray}

 

1842305218.jpg


影像輪廓 {FILTER: Xray}

1842305218.jpg


光源投射 {FILTER: Light}

1842305218.jpg



左右相反 {FILTER: FlipH}

1842305218.jpg



上下相反 {FILTER: FlipV}

1842305218.jpg


負片效果 {FILTER: Invert}

1842305218.jpg



透明遮罩 {FILTER: Mask}

1842305218.jpg


參數: Color 顏色

去除色彩 {FILTER: Chroma}
參數: Color 顏色

光暈邊緣 {FILTER: Glow}
參數: Color 顏色 Strength 範圍

立體陰影 {FILTER: Shadow}
參數: Color 顏色 Direction(0,90,180,270) 陰影角度(順時鐘)

影像模糊 {FILTER: Blur}
參數: Direction(0,90,180,270) 模糊角度(順時鐘) Strength 幅度

影像波浪 {FILTER: Wave}
參數: Freq 波浪數 Lightstrength 亮度 Phase 相角 Strength 幅度

下方陰影 {FILTER: DropShadow}
參數: Color 顏色 Positive 透明度 OffX 水平位移 OffY 垂直位移

影像透明 {FILTER: Alpha}
參數: Opacity 開始顯度 Finishopacity 結尾顯度 Style(0/1/2/3)
均勻/直線/圓形/對角 

做的好效果還不錯唷!!!!

amy5259 發表在 痞客邦 PIXNET 留言(0) 人氣()