在文章內文加入背景圖片

在文章內文加入背景圖片

分類：玩弄Blog

2007/03/20 14:31

怎樣在文章內文加上背景圖片呢?

1.點 【發表文章】

2.勾選 【觀看HTML 原始碼】

3.貼上語法

網址 border=8>

文字放在這裡

4.貼上背景圖片的網址

5.取消【觀看HTML 原始碼】

6.刪掉【文字放在這裡】這幾個字

7.加入文章內容(文字或圖片都可以)

8.發表

9. ok...

10. 您所選用的圖片(不管圖片多大)會自動添滿您文章欄位的寬度

三欄式是850 二欄式是750 如果你有更改過文章欄位寬度也一樣會填滿

而高度就是您文章的長度

怎樣在文章內文加上背景底色呢?

1.點 【發表文章】

2.勾選 【觀看HTML 原始碼】

3.貼上語法

009966 border=8>

文字放在這裡

4.更改背景底色的顏色 色碼表

5.取消【觀看HTML 原始碼】

6.刪掉【文字放在這裡】這幾個字

7.加入文章內容(文字或圖片都可以)

8.發表

9. ok...

10. 您所選用的顏色(不管什麼顏色)會自動添滿您文章欄位的寬度

三欄式是850 二欄式是750 如果你有更改過文章欄位寬度也一樣會填滿

而高度就是您文章的長度

如果您還要貼上背景音樂

8.發表文章以前

9.勾選 【觀看HTML 原始碼】

10.貼上語法

?mp3= 網址 &autoreplay=1&autoplay=1& bgcolor="FF3CAE" width="205" height="25">

11.貼上那首歌的網址

12.直接發表就ok了

*＜div align=center＞將文字置中

空行...段落:半型

加二個等於空二格，以此類推

標題底圖
　範例：
↓ 下面的CSS的語法，是部落格目前使用的
/*Main content header*/
.yc3pribd .mhd{ background:url(標題底圖) repeat; color:#FBF2CA(標題文字的顏色);}
將灰色的部份，貼上連結圖檔的網址，前後括號＂（）＂也是語法之ㄧ喔，別刪除喔！
語法範例：

/*Main content header*/ .yc3pribd .mhd{ background:url(http://xxxxx.gif) repeat; color:#FBF2CA;}

color色碼部分，看個人意思要不 要不更改～色碼表

招呼語底圖
　範例：
↓下面的CSS的語法，是部落格目前使用的
/*Opacity for blast*/
#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(圖檔網址) no-repeat}
將灰 色的部份，貼上連結圖檔的網址，前後括號＂（）＂也是語法之ㄧ喔，別刪除喔！
語法範例：

/*Opacity for blast*/ #yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(http://xxxxx.gif) no-repeat}

＞上面綠色部分，為調整透明度，數字越小越透明
＞如果是選擇小 圖示，要重覆並排，藍色部份改為＂repeat＂即可。

背景固定
　範例：
↓ 下面的CSS的語法，是部落格目前使用的
body {
background-image: url(圖檔網址);
background-repeat:no-repeat ;
background-position :0% 100%;
background-attachment: fixed;}
將灰色的部份，貼上連結圖檔的網址，前後括號＂（）＂也是語法之ㄧ喔，別刪除喔！
語法範例：

body { background-image: url(http://xxxxx.gif); background-repeat:no-repeat ; background-position :0% 100%; background-attachment: fixed;}

紅色部分說明:
backgroud-position: 0% 0%; 左邊上方
backgroud-position: 0% 50%; 左邊中間
backgroud-position: 50% 0%; 中間上方
backgroud-position: 50% 50%; 正中間
backgroud-position:100% 0%; 右邊上方
backgroud-position: 0% 100%; 左邊下方
backgroud-position: 100% 50%; 右邊中間
backgroud-position: 50% 100%; 中間下方
backgroud-position: 100% 100%; 右邊下方
ｐｓ：當然百分比可以任意調動，不一定上面的～

文章 背景
　範例：
↓ 下面的CSS的語法，是部落格目前使用的
/*Main content body*/
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{
background-image:url(圖片網址);
color:#1A4066(文章分類的顏色)} #ymodcal .mbd td strong {color:#3B9DC1(日曆開始的顏色);}
將灰 色的部份，貼上連結圖檔的網址，前後括號＂（）＂也是語法之ㄧ喔，別刪除喔！
語法範例：

/*Main content body*/ .yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{ background-image:url(http://xxxxx.gif); color:#1A4066} #ymodcal .mbd td strong {color:#3B9DC1;}

color色碼部分，看 個人意思要不要不更改～色碼表

左右側標題圖
　範例：
↓ 下面的CSS的語法，是部落格目前使用的
/*Nav module header*/
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ background:#FBF2CA(標題原本底色); color:#90620E(標題字體顏色); background-image:url(圖片網址);}
#ymodcal .mbd td strong {color:#DD1D27;}
將灰色的部份，貼上連結圖檔的網址，前後括號＂（）＂也是語法之ㄧ喔，別刪除喔！
語法範例：

/*Nav module header*/ .yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ background:#FBF2CA; color:#90620E; background-image:url(http://xxxxx.gif);} #ymodcal .mbd td strong {color:#DD1D27;}

color色碼部分，看個人意思要不要不更改～色碼表

左右側內容底圖
　範例：
↓ 下面的CSS的語法，是部落格目前使用的
/*Nav module body*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background: #FFFFFF(內 容底色);background-image: url(圖檔網址);color:#FF0000(內容字體顏色)}
將 灰色的部份，貼上連結圖檔的網址，前後括號＂（）＂也是語法之ㄧ喔，別刪除喔！
語法範例：

/*Nav module body*/ .yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background: #FFFFFF;background-image: url(http://xxxxx.gif) ; color:#ff0000}

color色碼部分，看個人意思要不要不更改～色碼表

上方控制列背景圖
　範例：
↓ 下面的CSS的語法，是部落格目前使用的
/*Master header*/
#yhtw_masthead{background-image: url(圖片網址);color:#000080（上方控制列部落格字樣）;filter:alpha(opacity=80); opacity:0.30; moz-opacity:0.5;}
#yhtw_masthead a,#yhtw_masthead a:link,#yhtw_masthead a:visited,#yhtw_masthead a:hover{color:#000080（上方控制列文字顏色）;}
將灰 色的部份，貼上連結圖檔的網址，前後括號＂（）＂也是語法之ㄧ喔，別刪除喔！
語法範例：

/*Master header*/ #yhtw_masthead{background-image: url(http://xxxxx.gif);color:#000080;filter:alpha(opacity=80); opacity:0.30; moz-opacity:0.5;} #yhtw_masthead a,#yhtw_masthead a:link,#yhtw_masthead a:visited,#yhtw_masthead a:hover{color:#000080;}

＞上面綠色部分，為調整透明度，數字 越小越透明
color色碼部分，看個人意思要不要不更改～色碼表

此部分為 小小羊兒教學-設定部落格背景

引用：http://tw.myblog.yahoo.com/jw!DLd62O.BHR6udtPKiQygstL33IsbLg--/article?mid=25649