前端學習 -- Html&Css -- 背景

background 在一個聲明中設定所有的背景屬性。 

background-attachment 設定背景圖像是否固定或者随着頁面的其餘部分滾動。 

background-color 設定元素的背景顔色。 

background-image 設定元素的背景圖像。 

background-position 設定背景圖像的開始位置。 

background-repeat 設定是否及如何重複背景圖像。

使用background-image來設定背景圖檔

- 文法：background-image:url(相對路徑);

 如果背景圖檔大于元素，預設會顯示圖檔的左上角

 如果背景圖檔和元素一樣大，則會将背景圖檔全部顯示

 如果背景圖檔小于元素大小，則會預設将背景圖檔平鋪以充滿元素

可以同時為一個元素指定背景顔色和背景圖檔，這樣背景顔色将會作為背景圖檔的底色，一般情況下設定背景圖檔時都會同時指定一個背景顔色。

background-repeat用于設定背景圖檔的重複方式。

可選值：

repeat，預設值，背景圖檔會雙方向重複（平鋪），

no-repeat ，背景圖檔不會重複，有多大就顯示多大，

repeat-x， 背景圖檔沿水準方向重複，

repeat-y，背景圖檔沿垂直方向重複。

背景圖檔預設是貼着元素的左上角顯示

通過background-position可以調整背景圖檔在元素中的位置

該屬性可以使用 top right left bottom center中的兩個值

來指定一個背景圖檔的位置

top left 左上

bottom right 右下

如果隻給出一個值，則第二個值預設是center

也可以直接指定兩個偏移量，

第一個值是水準偏移量

如果指定的是一個正值，則圖檔會向右移動指定的像素

如果指定的是一個負值，則圖檔會向左移動指定的像素

第二個是垂直偏移量

如果指定的是一個正值，則圖檔會向下移動指定的像素

如果指定的是一個負值，則圖檔會向上移動指定的像素

background-attachment用來設定背景圖檔是否随頁面一起滾動

scroll，預設值，背景圖檔随着視窗滾動

fixed，背景圖檔會固定在某一位置，不随頁面滾動

不随視窗滾動的圖檔，我們一般都是設定給body，而不設定給其他元素。

實作方式1：

實作方式二：

效果：