iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 18
1

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

background-color

單色的背景,可以用各種色碼作為屬性值。

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()引入圖片當背景,括弧內寫入相對定位或絕對定位值。

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

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

  • linear-gradient用漸層設背景
    linear-gradient的語法是:linear-gradius(degree, color)
    degree是gradient軸的角度,與它垂直的兩端是起點顏色與終點顏色。(該圖擷取自MDN)

    gradient軸的角度是從下方開始算的,所以0deg的顏色起始點是下方,終點是上方 ; 90deg起點是左方,終點是右方 ; 180deg起始是上方,終點是下方 ; 270deg起始是右方,終點是左方。360deg回到0deg的方向。

    div {
         width: 300px;
         height: 100px;
    }
    .block1 {
         background-image: linear-gradient( 0deg , green, yellow);
    }
    .block2 {
         background-image: linear-gradient( 270deg, green, yellow);
    }
    .block3 {
          background-image: linear-gradient( 150deg, green, yellow);
    }
    

    點看更多的linear-gradient屬性值

background-repeat

用來聲明背景圖片是否重複、如何重複顯示。

  • repeat(預設值)

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

  • no-repeat

    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。

    div {
        width: 100%;
        height: 300px;
        background-image: url(./image/cloud.png);
        background-size: contain;
    }
    

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

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

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

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

今天的筆記到這,下集待續。明天見~/images/emoticon/emoticon41.gif

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。


上一篇
Day17 CSS基本樣式-文字樣式
下一篇
Day19 CSS基本樣式-Background(下)
系列文
從門外漢到前端新手30

尚未有邦友留言

立即登入留言