۰۪۫爱۪۫۰۪۫上۫۰ Latte: 玩转blog

Catherine's profile۰۪۫爱۪۫۰۪۫上۫۰ LattePhotosBlogListsMore

Tools

Help

Blog

Summary

Listed by:

<< First < Previous Next > Last >>

图片滤镜

各種濾鏡樣式的詳細描述情形：

濾鏡的樣式名稱為 filter，
所以
套用在圖片上為<IMG Style="Filter:值 ;">
套用在DIV上為<DIV Style="Filter:值 ;width:濾鏡寬;height:濾鏡高" ><IMG></DIV>

為何使用DIV:因為上下邊界無空白，可以替代IMG，且某些濾鏡僅使用在DIV，多重效果要靠它。
但使用DIV時，必須設定寬度和高度。
＊要設定多個參數時，必須以半形的逗號","來區隔
＊圖寬與圖高只要在圖片上按右鍵內容可以得知

本範例使用原圖：(width:360px;height:270px;)

A.半透明合成：

HTML:

■參數

opacity             -->設定起始處的透明度
finishOpacity     -->設定結束處的透明度
style                -->0:均勻、1:線狀、2:圓形、3:長方形

範例:

HTML(Style為長方形):
<img src="http://myurl.com.tw/kdjd" style="filter:Alpha(opacity=100,finishOpacity=0,style=3)">
或
<div style="width:360px;height:270px;filter:Alpha(opacity=100,finishOpacity=0,style=3)">
<img src="http://myurl.com.tw/kdjd""></div>

結果:(style依序為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>

■參數

無

範例:

HTML:
詼諧:
<img src="http://myurl.com.tw/kdjd" style="filter:Gray">
或
<div style="width:360px;height:270px;filter:Gray">
<img src="http://myurl.com.tw/kdjd""></div>

Ｘ光效果:
<img src="http://myurl.com.tw/kdjd" style="filter:Xray">
或
<div style="width:360px;height:270px;filter:Xray">
<img src="http://myurl.com.tw/kdjd""></div>

色彩對換:
<img src="http://myurl.com.tw/kdjd" style="filter:Invert">
或
<div style="width:360px;height:270px;filter:Invert">
<img src="http://myurl.com.tw/kdjd""></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>

■參數

無

範例(效果為左右翻轉):

HTML:
<img src="http://myurl.com.tw/kdjd" style="filter:FlipH">
或
<div style="width:360px;height:270px;filter:FlipH">
<img src="http://myurl.com.tw/kdjd""></div>

結果:

D.發光效果：

HTML:

■參數

color -->發光顏色
strength -->發光強度
濾鏡寬=圖寬+發光強度x2
濾鏡高=圖高+發光強度x2+10

範例:

HTML:
<DIV style="FILTER: Glow(color=#4A7AC9,strength=12); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV>

結果:

E.投射陰影效果：

HTML:

■參數

color -->發光顏色
direction -->方向(45角度單位)(0、45、90、135、180、225、270、315)
濾鏡寬=略大於圖寬(建議:圖寬+24)
濾鏡高=略大於圖高(建議:圖高+24+10)

範例:

HTML:
<DIV style="FILTER: Shadow(color=#4A7AC9,direction=135); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV>

結果:

F.附陰影效果：

HTML:

■參數

color             -->發光顏色
offX              -->水平位移(可正負)
offY              -->垂直位移(可正負)
濾鏡寬=圖寬+水平位移絕對值+10
濾鏡高=圖高+垂直位移絕對值+10+10

範例:

HTML:
<DIV style="FILTER:Dropshadow(color=#333333,offX=5,offY=5); WIDTH: 375px; HEIGHT: 295px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV>

結果:

G.模糊效果：

HTML:

■參數

direction -->方向(45角度單位)(0、45、90、135、180、225、270、315)
濾鏡寬=略大於圖寬(建議:圖寬+15)
濾鏡高=略大於圖高(建議:圖高+15+10)

範例:

HTML:
<DIV style="FILTER: Blur(direction=135); WIDTH: 375px; HEIGHT: 295px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV>

結果:

H.波形效果：(ps.好複雜的參數設定@@")

HTML:

■參數

freq              -->頻率(0+)
strength        -->振幅強度(0+)
lightstrength -->波峰強度(0~100)愈高越黑
phase           -->起始相位(0~100)
濾鏡寬=圖寬+振幅強度x2
濾鏡高=圖高+振幅強度x2+10

範例:

HTML:
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV>

結果:

與原圖比較:

多重效果範例(請自行領悟:p)：

HTML:(波形加上半透明合成)
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><img src="http://myurl.com.tw/kdjd" style="filter:Alpha(opacity=100,finishOpacity=0,style=2)"></DIV>

結果:

HTML Language

1. 标签名称：

a       ->超连接
&nbsp ->空格
img    ->图片
u       ->底线
i        ->斜线
font    ->字型
b        ->粗体
p        ->段落
div      ->段落
br        ->断行
<img src="sample.gif"></img>------>show picture
<A herf="website">内容</A>------->设定内容超连接位置

2. Style Sheet

<标签名称 Style="样式名称:值;">內容</标签名称>

<DIV ALIGN="center">段落內容</DIV> ------->段落內容文字图片等置中

<DIV STYLE="各种样式">段落內容</DIV> ------->段落內容使用Style定义样式。

3. 段落屬性的Style Sheets：

文字間隔

letter-spacing

一般使用pt(點)或px(像素)或% : 例 9pt、10px

列高

line-height

點pt、英寸in、公分cm、像素px、百分比%

文字修飾格式

text-decoration

none(無)、underline(加上底線)、
overline(加上一道上線)、line-through(加上刪除線)

自動轉換大小寫

text-transform

none、capitalize(首字變大)、uppercase、lowercase

文字對齊方式

text-align

left、right、center(置中)、justify(分散對齊)

文字縮排

text-indent

一般使用pt(點)或px(像素)或% : 例 15pt、12px

單字間隔

word-spacing

一般使用pt(點)或px(像素)或% : 例 2pt、3px

文字方向

writing-mode

tb-rl (上至下、右至左)、lr-tb(上至下、左至右、標準)

文字方向

unicode-bidi: bidi-override; DIRECTION: 方向

rtl(右至左)、ltr(左至右)

其他

text-autospace、 text-justify、word-break(換行方式) 可用...

4. 文字屬性的Style Sheets：

樣式

樣式名稱

值

文字顏色

color

一般方式設定

文字大小

font-size

一般使用pt(點)或px(像素)或% : 例 9pt 、10px

字型

font-family

Arial、Georgia、新細明體...等各種字型名稱

文字粗細

font-weight

lighter、normal、bold、bolder (由細到粗排列)

斜體

font-style

normal、italic、oblique (一般使用italic)

英文樣式

font-variant

normal、small-caps

其他

不可用

第一種方式(使用Display:inline;) ：(向左下對齊)

HTML：

<DIV style="border:1px solid #000000; WIDTH: 97px; HEIGHT: 64px;Display:inline; background-color:#99FF33">
A</DIV>
<DIV style="border:1px solid #000000; WIDTH: 109px;HEIGHT: 73px;Display:inline; background-color:#FF9999">
B</DIV>

顯示結果：

第二種方式(使用float:left;)：(向左上對齊)

HTML：

顯示結果：

June 09 6:39 PM | Add a comment | Permalink | Blog it | 玩转blog

美化background

1. 最简单的方法

＊只要设定背景图片位址和宽高(纯日志背景图而已)(background-color: TRANSPARENT;已省略)

＊.最简单背景设法，省略图宽设定

2.可自行设定文本宽、文本高(需使用绝对大小如px)，也可自行加线框

HTML部分(background-color: TRANSPARENT;已省略)

i.e：
HTML：

<div style="WIDTH: 109px; HEIGHT: 108px;">
<img height="108px" src="http://members.jcom.home.ne.jp/norinori-hp/desktop/pictur/picturgif/babybear.gif" width="109" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 109px; HEIGHT: 108px; ">
<br>
<font color="#FF00FF">內容
<br>
<br>
圖片在文字下方</font>
</div>
</div>
結果：
　

內容

圖片在文字下方

3.滤镜用法：

◊在前景部份(上方部份)可以换成图片滤镜

i.e： 1(文字变透明)：

HTML：

把【background-color:TRANSPARENT;】
换成其中一种滤镜【filter:alpha(opacity=35,finishOpacity=35,style=0);】

<DIV style="WIDTH: 109px; HEIGHT: 108px"><IMG height=108 src="http://members.jcom.home.ne.jp/norinori-hp/desktop/pictur/picturgif/kuma.gif" width=109 align=right>
<DIV style="FLOAT: left; WIDTH: 109px; HEIGHT: 108px; filter:alpha(opacity=50, finishOpacity=50,style=0)"><BR>
<b><FONT color=#ff00ff>內容 <BR><BR>图片在文字下方</FONT></b></DIV></DIV>

結果：【文字也變透明了】
　

內容

圖片在文字下方

範例 2(圖片也重疊了)：

HTML：【再把內容換成圖片】

結果：【圖片也變透明了】

◊在背景部份(下方部份)也可以多加圖片濾鏡

範例：

HTML：背景圖多加圓形濾鏡

<div style="WIDTH: 109px; HEIGHT: 108px;">
<img height="108px" src="http://members.jcom.home.ne.jp/norinori-hp/desktop/pictur/picturgif/kuma.gif" style="FILTER: alpha(opacity=100, finishOpacity=0,style=2)" width="109" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 109px; HEIGHT: 108px; ">
<br>
<font color="#FF00FF">內容
<br>
<br>
圖片在文字下方</font>
</div>
</div>

結果：

內容

圖片在文字下方

＊因為只有一種方法可以實現背景圖，那就是把本文浮動置左，圖案浮動置右。所以也造成圖片永遠在右邊的問題。

這裡提供一個解決辦法，可以讓圖片 【永遠置左】HTML語法：(就是多加一個透明圖片，一起置右，置右寬度是100%)

這裡提供一個解決辦法，可以讓圖片"強制" 【永遠置中】

嘿嘿....那就是多包一層<DIV align=center>拉...相對的要填好本文寬度

HTML語法 :

☞ 回覆版 ☜

copy starts→●

☞ 回覆版 ☜

●←copy end

HTML：

ps.
red is background color
blue is the shade color

June 09 5:59 PM | Add a comment | Permalink | Blog it | 玩转blog

添加音乐

MUSIC UP

点击<html>，进入代码编辑

背景音乐代码语句如下

语句：<P><IMG height=0 loop=infinite dynsrc=您的音乐地址 width=0 border=0></P>

建议使用WMA格式的 ,比较小而清晰,在你耳边出现的速度相对快一点

参数: loop是循环次数, infinite是无限制循环,你也可以设置为1.2.3...随你喜欢咯

而且，记住一定要保证你的音乐地址有效哦~

你可以检查一边，将你的音乐地址打入浏览器地址栏，如果可以正常收听，表示有效~

系统升级，现可以利用<BGsound>添加背景音乐

方法如下：

<pre><BGSOUND balance=0 src="音乐地址" volume=-600 loop=infinite></pre>

还有尽量把这个放在第一行来写,或者单独开贴. 按Esc可以停止播放.

June 09 5:42 PM | Add a comment | Permalink | Blog it | 玩转blog