iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
自我挑戰組

文組視角的初學前端筆記系列 第 13

Day13 原來Background可以有這麼多設定

Background包含哪些屬性?

Background是縮寫,包含了以下幾個CSS屬性

  1. background-color
  2. background-image
  3. background-position
  4. background-repeat
  5. background-size
  6. background-origin
  7. background-attachment
  8. background-clip

因為第6~8個,我沒有實際使用過,所以會著重於前面1~5使用過卻沒有認真去鑽研的那些屬性。

參考資料: Background - 金魚都能懂的CSS必學屬性
background


1. background-color 設定背景顏色

從名稱就可以知道,是用來設定背景的顏色
例如:
background-color: brown;


2. background-image 將圖片設定成背景

一直以為只能設定一張圖片作為背景,查了之後才知道原來可以設定一個以上的圖片作為背景
例如:
background-image: url(" ");
background-image: url(""), url("");

參考資料:background-image


3. background-position 設定背景圖片的位置

常和background-image、background-repeat 搭配使用,讓背景圖片靠上、下、左、右或是置中顯示。
background-position 預設以左上角為起點,能控制的位置移動方式有水平的X軸移動和垂直的Y軸移動,不包含前後的Z軸。

background-position 常用來設定的值有以下幾種:

  • 關鍵字(Keyword values): top or bottom(Y軸關鍵字), left or right(X軸關鍵字), center
  • 百分比(percentage values): %
  • 長度(length values): cm, inch, em,...

background-position語法

background-position最多可以用到四個值來作設定
例如:
background-position:top;
background-position: 25% 75%;
background-position: bottom 10px right;
background-position: bottom 50px right 100px;

background-position 關鍵字使用時要注意的事

  1. 如果僅使用一個值,另一個值會預設成置中center,就不用同時設定X、Y軸
    例如:
    background-position: center; 設定背景圖片水平垂直居中於該容器中
    background-position: left; 設定背景圖片「水平靠左,垂直居中」
    background-position: right; 設定背景圖片「水平靠右,垂直居中」
    background-position: top; 設定背景圖片「水平居中,垂直靠上」
    background-position: bottom; 設定背景圖片「水平居中,垂直靠上」

  2. 使用兩個值做設定,如果第一個值用的是Y軸的關鍵字(top or bottom),另一個值就會變成是用來設定X軸
    例如:
    background-position: top right;

  3. center這個關鍵字和其他值一起使用時,會變成是X軸先Y軸後的順序來設定
    例如:
    background-position: 50px center; 背景圖片位置會是在離容器左側 50px 位置並垂直居中
    background-position: center 50px; 背景圖片位置會是水平居中,並離容器頂端50px

參考資料:Background-position- 金魚都能懂的CSS必學屬性


4. background-repeat 背景圖片設定成重複拼貼填滿容器

background-repeat的主要用途是當背景圖片比容器尺寸小的時候,可以設定以拼貼的方式將容器的範圍填滿

background-repeat能設定的值有以下幾個:

  • background-repeat: repeat; (預設) 設定背景圖片垂直水平都重複 多出來的圖片會被裁切掉
  • background-repeat: repeat-x; 設定背景圖片水平重複 設定同background-repeat:repeat no-repeat; 多出來的圖片會被裁切掉。
  • background-repeat: repeat-y; 設定背景圖片垂直重複 設定同background-repeat:no-repeat repeat; 多出來的圖片會被裁切掉。
  • background-repeat: space; 背景圖片會在不裁切的狀態下,盡可能重複,如果有剩餘容器空間無法被圖片填滿,會自動均分剩餘的空間範圍
  • background-repeat: round; 背景圖片會被改變大小,且在不裁切的狀態下,重複拼貼將容器的範圍填滿。
  • background-repeat: no-repeat; 設定背景圖片不重複拼貼。

參考資料:background-repeat
Background-repeat- 金魚都能懂的CSS必學屬性


5. background-size 設定背景圖片的尺寸

background-size 常用的設定方式有以下幾種:

  • 關鍵字: contain, cover
    background-size:contain;
    圖片原來的寬高比不會被改變,會縮放到背景圖片能完全顯示在容器中,所以會有留白區域

    background-size:cover;
    將背景圖片填滿整個容器,若背景圖片小於容器時,會寬高等比例地放大填滿容器,且超出容器範圍的圖片會被切 掉,容易造成失真。

    參考資料: background-size

  • 設定一個值,該值會代表寬度,高度就會變成預設auto
    例如:
    background-size: 50%;
    background-size: 3.2em;
    background-size: 12px;
    background-size: auto;

  • 設定兩個值,第一個值代表寬度,第二個值代表高度
    例如:
    background-size: 3em 25%;

    通常不會用background-size去修改圖片的尺寸,而是會用影像編輯軟體將要放在網頁上的圖片直接改成要用的大 小,以避免影響傳輸的速度。

參考資料:
Background-size

Background-size- 金魚都能懂的CSS必學屬性


6. background-origin 定位背景圖片?

這是一個我根本沒用過的屬性 看完一些解釋 我還是有點困惑
目前的理解是這個屬性的用途是定位背景圖片 感覺不是太實用 也想不到要用在什麼時間點?/images/emoticon/emoticon19.gif
以內容框為基準來改變背景圖片的位置

background-origin 設定的方式

  • background-origin: padding-box;
  • background-origin: border-box;
  • background-origin: content-box;

參考資料: MDN- background-origin W3SCHOOL- background-origin


7. background-attachment 將背景圖案設定成在拉動卷軸之後,仍可以顯示在固定位置

  • background-attachemnt:scroll; 當網頁捲動時,背景圖案會跟著頁面滾動來移動 (預設)
  • background-attachment:fixed; 設定背景圖案在螢幕上固定,即使是網頁捲動時,背景圖案仍固定顯示

參考資料:
Background-attchment- 金魚都能懂的CSS必學屬性
CSS沒有極限 - 意想不到的background-attachment


8. background-clip 設定背景圖片延伸位置 /images/emoticon/emoticon19.gif

background-clip設定的值主要有以下幾種:

  • background-clip: border-box;
  • background-clip: padding-box;
  • background-clip: content-box;
  • background-clip: text;
    參考資料:background-clip

以上為個人學習筆記整理
若有錯誤,歡迎指正


上一篇
Day12 經常搞混的CSS Position
下一篇
Day14 font-family 字型發揮吧
系列文
文組視角的初學前端筆記30

尚未有邦友留言

立即登入留言