__x__(36)0908第五天__背景 background

1. 背景 background: red url(img/cat.gif) repeat-x fixed;

 

---

 

2. 背景顏色 background-color: red;

 

---

 

3. 背景圖片 background-image: url(img/cat.gif);

• 若是圖片大於元素，則會顯示圖片左上角部分。
• 若是圖片和元素同樣大，則會所有顯示。
• 若是圖片小於元素，則圖片會 x 橫向， y 縱向 平鋪 鋪滿元素。
• 能夠同時設置background-color，做爲圖片的底色。

---

 

4. 背景圖片重複方式 

• background-repeat: repeat;    默認值，x 橫向，y 縱向 平鋪。
• background-repeat: no-repeat;    不重複。
• background-repeat: repeat-x;    x 橫向平鋪。
• background-repeat: repeat-y;    y 縱向平鋪。

.nav{
    width: 990px;
    height: 32px;

    margin: 10px auto;

    background: #bfc url(img/bg.gif) repeat-x;
}

截取背景 y 縱向一像素，而後「圖片-裁剪-存儲爲Web格式」，選擇格式，選大小合適的。

 

---

 

5. 一張圖片在元素內顯示位置

background-position: 0% 0%;    默認值，從左上角開始顯示

（x水平，y垂直）

(1)

x水平: 可選 left，right，center;

y垂直: 可選 top，bottom，center;

注意：若是隻寫一個值，另外一個值默認爲center。

(2)

以元素的左上角爲原點，設置(100px,100px)

若是指定負值，則向反方向偏移。

---

 

6. 圖片 是否 隨頁面其他滾動background-attachment

• background-attachment: scroll;    默認值，背景圖片隨滾動條滾動。
• backgroound-attachment: fixed;    背景圖會固定在瀏覽器某個位置，不隨滾動條滾動。

缺點： 

通常咱們設置窗口固定背景時，都設置給body。

由於若是設置給其餘元素，圖片會固定，元素不會固定。。。當元素不存在於視覺中，圖片就會顯示不全或者消失。。。