Babekay's World

就正如標題所說喔..
我本人覺得 部落格標題 用文字來表達..
總覺得還是欠一點點的東西..
因為 "字型" ..
不一定每個人都有安裝那些美美的字型啊..
所以就算我們在原始碼中設定了..
人家也不一定看得到啊!!
因此...
我們就需要用圖片囉 =D
可以有美美的字型&圖畫,,也可以只用圖畫

在開始之前..想再說一下
其實可能大家都覺得根本不需要額外弄這個教學..
因為 樣式設計精靈 中,,
就可以直接選擇把圖片放在 Body / Header ..
而且也可以選擇要放在 左上 / 右上 / 中間 ..
不需要去記那些原始碼..

但是..我想說..
如果你跟我一樣是 CSS語法小菜鳥,,但是卻又想自己弄面版的話..
請一定要聽我說..
不要使用 樣式設計精靈 來設定 Header 的圖片
因為它會使你之前選擇的教學版型給改掉!!
那些中文解釋會全部消失!!
所以請乖乖的把語法貼上去吧..不要偷懶喔!!

ﾟ･:,｡ﾟ･:,｡★ﾟ･:,｡ﾟ･:,｡☆｡,:･ﾟ｡,:･ﾟ

不排除日後會弄一個做Banner的教學喔
有興趣的請留言支持一下 =D

ﾟ･:,｡ﾟ･:,｡★ﾟ･:,｡ﾟ･:,｡☆｡,:･ﾟ｡,:･ﾟ

ﾟ･:,｡ﾟ･:,｡★ﾟ･:,｡ﾟ･:,｡☆｡,:･ﾟ｡,:･ﾟ

不會有圖片附助教學..純文字
不明白的話,,歡迎留言發問喔

ﾟ･:,｡ﾟ･:,｡★ﾟ･:,｡ﾟ･:,｡☆｡,:･ﾟ｡,:･ﾟ

首先..當然就是要先找你想用的圖片..
然後呢,,就是要知道你想放的地方是哪個標籤

例如：
整個部落格(Body) 就是整個部落格的畫面
橫幅 (Header) 就是哪個有 部落格標題,,
也就是我之前教 Display:none; 做例子的地方啊
或者是..
其他服務連結區塊 (navigation) 就是哪個有 部落格 / 名片 / 留言版 / 相簿 連結的地方啊

Body / Header , 這兩個地方如果還是不明白的話
可以按去 樣式設計精靈 中,,
因為它有一個小圖,,藍色的地方就是該位置咯
如果還是不明白的話,,請查看之前的文章 轉貼&分享`痞客模板架構表

ﾟ･:,｡ﾟ･:,｡★ﾟ･:,｡ﾟ･:,｡☆｡,:･ﾟ｡,:･ﾟ

好啦..找到要放哪之後,,
就是要學會下面這串語法..
要記得喔..如果根本不需要該語法就不要貼上去喔!!

background-image : url(bg.jpg); /*背景圖片*/

background-color:#fff; /*背景色彩*/

background-attachment : fixed; /*浮水印固定背景*/
(這個是指圖片固定,,而且不隨著捲動)

background-repeat : repeat; /*重複排列-網頁預設*/

background-repeat : no-repeat; /*不重複排列*/

background-repeat : repeat-x; /*在 x 軸重複排列*/
(也就來向橫重覆)

background-repeat : repeat-y; /*在 y 軸重複排列*/
(也就來向直重覆)

background-position : top; /*向上對齊*/

background-position : bottom; /*向下對齊*/

background-position : left; /*向左對齊*/

background-position : right; /*向右對齊*/

background-position : center; /*置中對齊*/

如果想圖片在 右中 的話,,就會是
background-position : top right ;

background-position : 90% 90%; /*背景圖片x與y軸的位置*/
(其實這個我不太會用,,因為它會跟隨屏幕的解析度改變)
如果真的打算要很仔細的標明位置..
可以 left : 100px (數字自己改喔)
這個語法是會讓圖片從左邊開始算起 100px 後出現
簡單來說就是與左邊有 100px 的距離喔

ﾟ･:,｡ﾟ･:,｡★ﾟ･:,｡ﾟ･:,｡☆｡,:･ﾟ｡,:･ﾟ

好咯..
應該差不多了吧..

雖說其實有一些更簡潔的寫法..
但是真的不建議像我這樣的 CSS小菜鳥 用簡寫寫法..
因為有時候可能會出現錯誤,,
甚至連哪裡錯了也不知道..

ﾟ･:,｡ﾟ･:,｡★ﾟ･:,｡ﾟ･:,｡☆｡,:･ﾟ｡,:･ﾟ

下一次會說 高度跟寬度 =D

有錯誤的話,,歡迎留言指導,,謝謝