---
# System prepended metadata

title: 背景

---

# 背景
###### tags: `NKFW 網頁設計入門`

---

* background-color
* background-image
* background-position
* background-repeat
* background-attachment
* background-size

---

## background-color

---

:::info
調整背景顏色
:::

---

顏色有三種表示方法
* 英文名稱
    * 例：red ,blue......
* rgb(red,green,blue)
    * 例：rgb(255,0,0) 為紅色
* 色碼表
    * 例：#000000 為黑色
    * [色碼表](https://www.ifreesite.com/color/)

---

:::warning
注意!!!
* 當賦予body或html背景顏色時會默認為整個視窗
* 當同時賦予body和html背景顏色時視窗背景顏色會是html的，而body的則會以body的尺寸呈現
:::

---

## background-image

---

:::info
放背景圖片
:::

---

* background-image : url("圖片連結網址")
* 例：
    ```css=
    body {
        background-image : url("https://picsum.photos/id/684/600/400");
    }
    ```

---

* 完整畫面呈現如下
    ![](https://i.imgur.com/WEsa88E.png)

---

## backgreound-repeat
:::info
設定背景圖片是否要重複
:::

---

* background-repeat : repeat;
    * 用同一張照片將背景補滿(預設)
* background-repeat : no-repeat;
    * 不重複背景圖片 例：
    ```css
    body {
        background-image : url("https://picsum.photos/id/684/600/400");
        background-repeat: no-repeat;
        }
    ```
    * 完整畫面呈現下
    ![](https://i.imgur.com/ViywtII.png)

---

## background-position

---

:::info
設定背景位置
:::

* 設定值可以是方位
    * left
    * right
    * top
    * bottom
    * center

---

    :::info
    可一次選擇多個值。如果只選一個值，其他方向會自動默認center
    :::


---

    * 例：
    ```css!
    body {
            background-image : url("https://picsum.photos/id/684/600/400");
            background-repeat: no-repeat;
            background-position right bottom;
            }
    ```

---

畫面呈現如下
![](https://i.imgur.com/rcWMDlO.png)
    

---

* 設定值也可以用 x% y%

    * x 為水平 0~100
        * 0% 靠左；100% 靠右
    * y 為垂直 0~100
        * 0% 靠上；100% 靠下
    * 例：
    ```css!
    body {
            background-image : url("https://picsum.photos/id/684/600/400");
            background-repeat: no-repeat;
            background-position 25% 75%;
            }
    ```

---

* 畫面呈現如下
    ![](https://i.imgur.com/5u3yGkj.png)
    
---

## background-attachment

* background-attachment : scroll
    * 背景圖片可滑動(預設)
* background-attachment : fixed
    * 背景圖片固定

---

## background-size
* 調整背景圖片大小
* background-size : auto
    * 不改變圖片大小(預設)
* background-size : cover
    * 調整背景圖片大小直到填滿所屬標籤 例：
    ![](https://i.imgur.com/YHyEuNN.png)
    

---

## 範例：滿版背景
:::info
做一個滿版的背景，我們希望：
* 圖片放在正中間的位置
    * 控制background-position
* 圖片不要失真，要維持原來的比例
    * 控制background-size
* 當網頁內容很多的時候，網頁往下拉背景不會動
    * 控制background-attachment
* 圖片不要重複出現
    * 控制background-repeat
:::

---


```css!
body{
    background-image: url("https://picsum.photos/id/237/1600/900");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
```

---

或是

```css!
body{
background: 
    url("https://picsum.photos/id/237/1600/900")
    center / cover
    no-repeat
    fixed;
}



    ![](https://i.imgur.com/nnIZZa6.jpg)


---

儘管我們做了很多設定，但是有時候背景還是會跑掉，看起來不像我們想要的樣子，原因像是：
* 圖片原來的解析度太小，放大後會糊掉
* 圖片的比例跟設備尺寸不合，所以放大的時候會被切掉某些部分

---

## 範例：固定的背景
:::info
做一個固定的背景，上方是文字區塊，當網頁往下拉的時候背景不會動。
:::

## Project (或是範例？)
:::info
要怎麼樣才能放好一張背景圖片？這個問題真的蠻難的唷
試試看做一個滿版背景，正中間放一些文字
:::

