---
# System prepended metadata

title: 7/12(一) 每日任務
tags: [網頁切版直播班 - 2021 夏季班]

---

---
tags: 網頁切版直播班 - 2021 夏季班
---
{%hackmd theme-dark %}
# 7/12(一) 每日任務

## 認識 CSS 語法 background-image 

通常會用來設定背景圖片，用法如下：

```htmlembedded
<div class="image"></div>
```

```css
.image{
  height:300px;
  background-image:url("https://images.unsplash.com/photo-1599978364004-95d0725c5bb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80")
}
```
> 開發時可以使用相對路徑或絕對路徑，不過因為 Codepen 無法載入本地圖片，需透過圖片位址（絕對路徑）




* **background-position**

    如果圖片太大則會出現這樣的畫面

    ![](https://i.imgur.com/18kReJN.png)
    什麼都看不到XD

    要調整他的位置可以使用 `background-position`
    > top ｜ bottom ｜ left ｜ right ｜ center

    ```css
     background-position: center;
    ```

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

* **background-size**
    但是原圖並沒有這麼大，所以使用 `background-size` 調整
    
    > auto ｜ contain ｜ cover

    ```css
    background-size: contain;
    ```
    ![](https://i.imgur.com/hPuts4F.png)
    
    background-size 改用 cover 查看兩者的差別。
    > contain 是在不超過原圖的大小前提下等比縮小
    > cover 是等比例縮放，讓圖片可以蓋滿元素寬高。
    ```css
    background-size: cover;
    ```

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

* **background-repeat**
    背景圖片重複的問題，為了不讓他重複所以要使用 `background-repeat` 設定
    
    > repeat(預設值)｜ repeat-x ｜ repeat-y ｜ no-repeat
    > 
    ```css
    background-repeat: no-repeat;
    ```

    ![](https://i.imgur.com/ur2kWEi.png)



**完整程式碼**
```htmlembedded
<div class="image"></div>
```
```css
.image{
  height:300px;
  background-image:url("https://images.unsplash.com/photo-1599978364004-95d0725c5bb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
```


## 題目

請到 [Unsplash 官網](https://unsplash.com/)上找一張圖片，並使用 background-image 製作背景圖（請不要複製上方程式碼）

[Codepen 範例-背景圖應用](https://codepen.io/AliceChiang/pen/WNxGvJB)（可只做背景圖的部分，文字部分可以省略）

## Result
**Ans: [CodePen 連結](https://codepen.io/jeffhung/pen/BaRpgJV)**