Web

CSS 認識 background (上)

, ,

background 屬性是用來聲明元素的背景，它可以大到網頁整個背景，也可以設定一個一個區塊的背景，或是小到像<button>、<a>都可以使用background屬性來聲明背景樣式。背景可以填單色，也可以做漸層色，或是引入一張圖片來當背景。它們各自有其相應的屬性及屬性值(參數)：

background-color

單色的背景，可以用各種色碼（Hex、RGB、HSL）作為屬性值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body {
     background-color: #eded89;
 }

 .container {
     width: 500px;
     height: 300px;
     background-color: hsla(240, 60%, 60%, .5);
 }

 .block1 {
     width: 200px;
     height: 100px;
     background-color: rgb(180, 256 ,0);
 }

 .block2 {
     width: 200px;
     height: 100px;
     background-color: rgba(180, 256 ,0, .5);
 }

background-image

  • url()引入圖片當背景，括弧內寫入相對定位或絕對定位路徑。

    1
    2
    3
    body {
          background-image: url(./image/cloud.png);
    }

    圖片的大小是225*225px，它會自己去填滿body的寬高。（因為background-repeat的預設值是repeat。）

  • linear-gradient用漸層設背景

    • 漸變方向

      值得注意的是，漸層背景是屬於 background-image 的範疇，而不是 background-color，這是新手常犯的錯誤。
      linear-gradient 的語法是：

      1
      2
      linear-gradius( 方向 direction, 顏色 color )
      linear-gradient( [ <angle> | to <side-or-corner> ,] <color-stop-list> )

      方向可以用方位名稱（ top、right、bottom、left ）來表示；也可以用角度（ deg，degree ）來表示。

      它的原理是透過 gradient 軸來漸變不同的顏色，與 gradient 軸垂直的兩端是起點顏色與終點顏色。（該圖擷取自MDN

      gradient 軸的角度是從下方 (bottom) 算起，所以 0deg 的顏色起始點是下方 (bottom) ，終點是上方 (top) ; 90deg 起點是左方 (left)，終點是右方 (right) ; 以此類推。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      div {
          width: 300px;
          height: 100px;
      }
      .block1 {
          background-image: linear-gradient( 0deg , green, yellow);
          /* 等同於 */
          background-image: linear-gradient( to top , green, yellow);
      }
      .block2 {
          background-image: linear-gradient( 270deg, green, yellow);
          /* 等同於 */
          background-image: linear-gradient( to left , green, yellow);
      }
      .block3 {
          background-image: linear-gradient( 150deg, green, yellow);
            /* 等同於 */
          background-image: linear-gradient( to bottom left , green, yellow);
      }

    • 漸變比例分配

      如果想要讓顏色晚一點變漸層，是可以透過比例分配來調整的，只要在顏色後方聲明單位或比例就可以了。若沒有聲明，就會平均分配各個顏色所佔的區域。

      1
      2
      3
      .block-average {
        back ground-image: linear-gradient( 90deg, yellow, green, orange);
      }

      1
      2
      3
      .block-proportion {
        back ground-image: linear-gradient( 90deg, yellow 50%, green, orange);
      }

    點看更多的linear-gradient屬性值。

background-repeat

用來聲明背景圖片是否重複、如何重複顯示。
單值語法：

1
2
3
4
5
6
background-repeat: repeat-x;   /*水平重複*/
background-repeat: repeat-y;   /*垂直重複*/
background-repeat: repeat;     /*重複，為預設值*/
background-repeat: space;      /*重複，並由剩下的容器空間分配間隔*/
background-repeat: round;      /*改變圖片本身的比例，適應容器並填滿容器*/
background-repeat: no-repeat;  /*不重複*/

雙值語法: 水平 | 垂直

1
2
3
4
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

  • repeat(預設值)

    1
    2
    3
    4
    body {
        background-image: url(./image/cloud.png);
        background-repeat: repeat;
    }

  • no-repeat

    1
    2
    3
    4
    5
    body {
        background-color: #fff8d8;
        background-image: url(./image/cloud.png);
        background-repeat: no-repeat;
    }

    點看更多background-repeat。

background-size

用來聲明背景圖片的大小。

  • contain
    contain 值是不超過原圖的大小這個前提下，等比縮小到符合容器大小，不加以裁切或伸展，通常用在圖比容器大的時候。以下面的例子來說，圖片是1000*677，而容器是300*200，為了不裁切到圖片，圖片會等比縮到約299*200。

    1
    2
    3
    4
    5
    6
    div {
      width: 100%;
      height: 300px;
      background-image: url(./image/cloud.png);
      background-size: contain;
    }

  • cover
    cover 值是等比例縮放，讓圖片可以蓋滿元素寬高，若因為比例與元素不均等，導致寬度或高度超過，就會裁切。以同樣的圖片為例，圖片是 1000*677，<div>佔滿瀏覽器寬度約 1280。圖片為了蓋滿寬高，會等比放大成約 1280*866 的大小，高度高過 300px 的部分都會被裁切掉。

    1
    2
    3
    4
    5
    div {
      height: 300px;
      background-image: url(./image/cloud.png);
      background-size: cover;
    }

  • 單位與數值
    也可以用單位與數值來設定背景圖片的大小。它可以只設定寬，並讓高自動符合比例 ; 或是反過來 ; 或是寬高都設值，如此一來圖片將失去本來的比例，導致失真。

    1
    2
    3
    4
    5
    6
    body {
      width: 100%;
      height: 300px;
      background-image: url(./image/cloud.png);
      background-size: 50% 200px;
    }

Share