星期六假日，我是喵橘，先開心去看電影...咦?晚點再講解 CSS 背景部分。

CSS 背景

背景色彩設定

網頁除了文字的變化，也別忘記背景也能做設計，顏色調整得宜就能吸引使用瀏覽。

CSS

p { 
    color: #FFF;
    background-color: #0F0;
}

HTML

<p>我是喵橘</p>

範例圖示：

背景圖片嵌入

也可以自己繪製相關圖片，配合公司的理念做出具有質感的背景。

CSS

body { background-image: url(sky.jpeg); }

HTML

<p>我是喵橘</p>

範例圖示：

背景圖片重複技巧

運用背景重複的技巧，可以不用匯入大張的圖片，用小張圖案重複動作，形成一個具有美感的背景。

CSS

body { background-image: url(love.png); background-repeat: repeat-x; }
p{ color: orange; }

HTML

<p>我是喵橘</p>

範例圖示：

背景圖片固定方法

是否要固定背景是否跟著你的移動而進行動作，可以思考自己的網頁特性，來添加此功能。

CSS

body { 
    background-image: url(love.png); 
    background-repeat: repeat-x; 
    background-attachment: fixed;
    height: 1000px;
}
p{ color: orange; text-align: center; }

HTML

<p>我是喵橘</p>

範例圖示：

背景位置設定

設計的圖片可以放置自己想要的位置，不一定要繪製整張背景圖。

CSS

body { 
    background-image: url(love.png); 
    background-repeat: no-repeat; 
    background-position: 600px 30px;
    }
p{ color: orange; text-align: center; }

HTML

<p>我是喵橘</p>

範例圖示：

範例圖示：

背景大小設定

假如圖片太大或太小，可以運用此功能來調整。

CSS

body { 
    background-image: url(love.png); 
    background-repeat: no-repeat; 
    background-position: 600px 30px;
    background-size: 30% auto; 
    }
p{ color: orange; text-align: center; }

HTML

<p>我是喵橘</p>

範例圖示：

背景快速設定

假如熟悉 CSS 語法，就是要優化程式碼，這一個方法是最推薦也是對網頁執行效率最好的方法。

CSS

body { 
        /* background: 背景顏色 背景圖片 背景重複方式 背景位置 背景是否固定*/
        background: #fff url(love.png) no-repeat top center;
    }
p { color: orange; text-align: center; }

HTML

<p>我是喵橘</p>

範例圖示：

明天預告

今天是講解 CSS 背景設定，有許多不清楚的部分，往後會找時間補充與改進，明天開始講解 CSS 邊框部分，謝謝大家的閱讀。