【log3】background

Saint發表於2018-08-01

CSS 背景屬性

屬性描述
background簡寫屬性，作用是將背景屬性設定在一個宣告中。
background-attachment背景影象是否固定或者隨著頁面的其餘部分滾動。
background-color設定元素的背景顏色。
background-image把影象設定為背景。
background-position設定背景影象的起始位置。
background-repeat設定背景影象是否及如何重複。

     背景色【background-color】 屬性用純色來填充背景。

  1. background-color: blue;
  2. background-color: rgb(0, 0, 255);
  3. background-color: #0000ff;

    背景圖【background-image 】屬性允許指定一個圖片展示在背景中

  background-image: url(images/image.jpg);

      背景平鋪【background-repeat】設定背景圖片時，預設把圖片在水平和垂直方向平鋪以鋪滿整個元素。

  1. background-repeat: repeat; /* 預設值，在水平和垂直方向平鋪 */
  2. background-repeat: no-repeat; /* 不平鋪。圖片只展示一次。 */
  3. background-repeat: repeat-x; /* 水平方向平鋪(沿 x 軸) */
  4. background-repeat: repeat-y; /* 垂直方向平鋪(沿 y 軸) */
  5. background-repeat: inherit; /* 繼承父元素的 background-repeat 屬性*/

背景定位【background-postion】屬性用來控制背景圖片在元素中的位置。

  1. /* 例 1: 預設值 */background-position: 0 0; /* 元素的左上角 */
  2. /* 例 2: 把圖片向右移動 */background-position: 75px 0;
  3. /* 例 3: 把圖片向左移動 */background-position: -75px 0;
  4. /* 例 4: 把圖片向下移動 */background-position: 0 100px;

順序方面和使用畫素值時的順序幾乎一樣，首先是 x 軸，其次是 y 軸，像這樣：

background-position: top right;
複製程式碼

瀏覽器是以元素的百分比數值來設定圖片的位置的。看例子就好理解了。假設設定如下：

background-position: 100% 50%;複製程式碼

背景附著【background-attachment】屬性決定使用者滾動頁面時圖片的狀態。三個可用屬性為 scroll(滾動)，fixed(固定) 和 inherit(繼承)。inherit 單純地指定元素繼承他的父元素的 background-attachment 屬性。

如果設定 background-attachment: scroll，就設定了當元素滾動時，元素背景也必需隨著滾動。

background-image: url(test-image.jpg);

background-position: 0 0;

background-repeat: no-repeat;

background-attachment: scroll;

效果：當向下滾動頁面時，背景向上滾動直至消失。


當設定 background-attachment 為 fixed 時，當頁面向下滾動時，背景要待在它原來的位置(相對於瀏覽器來說)。也就是不隨元素滾動。

background-image: url(test-image.jpg);

background-position: 0 100%;

background-repeat: no-repeat;

background-attachment: fixed;

效果：頁面已經向下滾動了，但是影象仍然保持可見。


背景的簡寫屬性【background】

 background-color: transparent;

background-image: url(image.jpg);

background-position: 50% 0 ;

background-attachment: scroll;

background-repeat: repeat-y;

以上語句可以簡寫成：background: transparent url(image.jpg) 50% 0 scroll repeat-y;


相關文章