♂月橘館♀

設計部落格時，無論是背景圖、標題底圖、小圖示等等都會用到「背景」語法

背景的屬性應用則是今天的主題

在這要教大家怎麼放底圖、上底色、喬位置

關於背景的屬性，基本上有五種：

1、background-color：背景色

2、background-imae：背景圖

3、background-repeat：重複

4、background-attachment：固定、捲動

5、background-position：背景圖位置

1.background-color：設定背景的顏色

　語法範例：{background-color: #fff;}  →背景色為白色

　　　　　　{background-color: gray;} →背景色為灰色

　在background-color:的後面填上你想要得顏色色碼即可。

　偷懶一點也可以直接打你想要的顏色英文，如紅色為red。

　但是比較準確的顏色還是參考色碼表比較恰當。色碼表→

2.background-imae：選擇要當作背景圖的圖案

　語法範例：{background-image:url(圖片網址);}

　圖片請上傳到相本、免費圖片空間或是網頁空間皆可

　免費網頁空間申請→

　※放置圖片時，也要注意圖片大小合不合適喔

　  如自訂欄位標題長寬為180 x 30，圖片比較大的話，多的部份會被切掉的

　  所以在選圖、畫圖的時候也要考慮到這點喔！

 3.background-repeat：背景圖要不要重複

　參數：repeat-x、repeat-y、no-repeat

　語法：

　①{background-image:url(xx.jpg);  background-repeat: no-repeat;}

　　表示圖片xx不重複

　　一般沒有加上「background-repeat: no-repeat」這一段的話，圖片都會自動往x及y方向重複

　　x、y方向就是往橫的跟往直的方向

　②{background-image:url(xx.jpg);   background-repeat: repeat-x;}

　　表示圖片xx只往x方向(橫)重複→圖圖圖圖

　③{ background-image:url(yp.jpg);  background-repeat: repeat-y;}

　　表示圖片xx只往y方向(直)重複→圖

　　　　　　　　　　　　　　　　  圖

4.background-attachment：背景圖片固定不動或跟著捲軸捲動

　參數：fixed

　語法範例，以文章及自訂欄位區塊的背景圖為例

container{background-attachment: fixed;
                 background-image: url("xx.jpg");
                 background-repeat: no-repeat;

}

　表示圖片xx不重複而且固定，捲軸怎麼卷背景圖只會固定在那

　如我先前的巧克力好好粗的短版樣式跟目前的看光光樣式，怎麼捲動背景圖都不會動

　語法沒有加上「background-attachment: fixed; 」這段的話，就是會跟著捲動囉

5.background-position：調整背景圖位置

　參數一：top、bottom、right、left、center...等(最常用）

　參數二：百分比

　參數三：數值

◎參數一的語法範例：以文章及自訂欄位區塊的背景圖為例

container{background-position: left top; 
                 background-image: url("xx.jpg");
                 background-repeat: no-repeat;

}

　表示圖片xx不重複而且會出現在文章及自訂欄位區塊裡面的左上方

　「left 　top」的部份可以自行從「top、bottom、right、left、center」裡面選擇

　通常right跟bottom比較少會用到，置中則用center即可。

◎參數二的語法範例：以文章及自訂欄位區塊的背景圖為例

container{background-position: 10% 20%; 
                 background-image: url("xx.jpg");
                 background-repeat: no-repeat;

}

　表示圖片xx不重複而且會出現在距離x方向的10%、y方向20%的地方

　在這邊的10%為 把x軸的距離用百分比來表示(個人很少用到...)

◎參數三的語法範例：以文章及自訂欄位區塊的背景圖為例

container{background-position: 10px 20px; 
                 background-image: url("xx.jpg");
                 background-repeat: no-repeat;

}

　表示圖片xx不重複而且會出現在距離x方向的10px、y方向20px的地方

把上面的基本概念釐清之後，相信圖片的位置調整等應該難不倒各位

基本上，單純的背景圖語法可以把語法濃縮成一段

container{background-image: url(圖片網址)  left  top  no-repeat  fixed　#fff;}

這一段是最常見的圖片語法：圖片靠左上角、不重複、固定、底色白色

話雖如此，但是某些時候還是需要這些比較繁瑣的語法來作調整

So...這點就得靠大家自己摸索囉~（逃

如果妳覺得這篇不錯的話
請留個回應或是幫忙點一下旁邊的廣告給我當獎勵喔
不回應的話，我只好這樣做

本文歡迎轉載、引用，但請註明出處
圖片、檔案皆存放於本人空間
如欲再行分享，請上傳至自己的空間
勿以本人空間再行分享之實！
請注意網路禮儀！