CSS 17. background image and color

認識 background 原理及應用:

• background-color:

1. 有兩個 h1 隊名範例:

<h1>
  fubon guardinas
</h1>

<h1>
  CTBC brothers
</h1>

2. 導入 background-color 屬性:

h1 {
  background-color: rgba(10,0,255,0.5);
}

// 另一種寫法:

也可以直接打色碼#000000; 或是顏色屬性:red 諸如此類。

---

background-image / 在網頁上導入背景圖片:

• 很多時候，我們會需要一張背景圖片，讓網頁看上去不這麼單調。

  此時就需要認識到幾種屬性:

1. background-image:

• 兩種組法:

  1-1. 可使用相對位置，自己 PC 的路徑來鍵入(範例):

  background-image: url('./img/fg/2022cover.jpeg');

---

• 1-2. 使用絕對位置，查找圖片的網址， copy url 即可:

background-image: url('輸入網址');

2. background-size:

• 再導入圖片時會發現，有些圖片可能因為大小的關係，會重複出現在網頁上：

• 這是因為，當網頁瀏覽器太大時，background-image 內建的屬性:

  background-repeat，會預設自動 repeat 到整個網頁結束這樣。

  提供以下方法來解決。

3. 解決 repeat 的方式:

// 預設:
background-size: content

// 改成:

background-size: cover;

4. background-repeat設定: no-repeat:

// 預設 content 圖片不夠大會 repeat，使用下列語法可解除:
background-repeat: no-repeat;

3. background-position:

• 可透過 MDN 瀏覽各種更改 **background-position **作法

tags: 2022 網頁開發全攻略教程 / CSS篇章 - box model