Cbox加入美美背景和透明捲軸
Cbox在部落格中為最廣泛使用的迷小留言版,若你還沒有Cbox可以來看看:
接下來,我們來實現CBOX插入背景圖且使捲軸透明,無名也適用喔!
教學Start
製作背景圖:圖片大小視Cbox的寬高去製作,輸入區跟訊息區的呈現也先設定好
做圖時,圖片高度最多超出Cbox高度20px,剛好到廣告上方,廣告可以設資料夾高度來掩蓋。
圖片高若超過Cbox高度20px,Cbox廣告會擋到圖片,若要顯示全圖就會蓋不到廣告!
但在步驟2可以利用Padding和Cbox的heightmain、heightform,來依你的圖片調整位置!
崁入Cbox:利用DIV和CSS語法加入背景圖,若要將捲軸透明就必須要有table
<div>和</div>包覆你的Cbox語法,紫字為設定背景圖,灰字為設定表格,粉字為你Cbox的JS語法
調整Cbox的位置:
在style=" "之內,加入CSS語法↓Padding去移動,如:Padding-top:10px; 為距離上10px
Padding-top(上)、Padding-left(左) 、Padding-right(右)、Padding-bottom(下)
調整Cbox的大小:
修改橘字JS語法的width(寬度)、heightmain(訊息區高)及heightform(輸入區高)來配會底圖
加入透明捲軸:
在綠字的style=" "之內,加入濾鏡語法↓FILTER去設定
FILTER: Chroma(Color=#0C0300); #0C0300為要透明的色碼,也就是你的Cbox的捲軸色碼
若網誌的文字、框線等有相同色碼#0C0300,也會跟著變透明,所以最好設成不相關的色碼!
其他區塊透明:
只要更改Cbox即可(如上圖),依自己的需求把區塊的色碼清除就能變成透明了。
其他應用,圖片有濾鏡特效:
在藍字的style=" "之內,加入濾鏡語法↓FILTER去設定,以半透明濾鏡為例
FILTER:Alpha(opacity=n);n值為0~100,透明度說明↓
├───────────────────────┤
100% 50% 0%
不透明 半透明 完全透明
無名資料夾有字數限制,若CSS語法字數超過,就會被切掉一部份,而無法正常顯示。
複製語法照上述增加和修改,語法之間不要斷行!
貼回部落格側欄:視情況再去修改資料夾的高度或寬度喔!
寬度依各自需求設定,但別超過連結列寬度,否則連結列會往下跑喔!
設定的高度為背景圖高度,不然會看到廣告喔!
若Cbox貼到部落格後,還會顯示藍邊,在橘字的前加<a>,後加</a>
<a>Cbox的JS語法</a>
留言列表