# 🏅 Day 40 - Background linear gradient

## MDN 漸層介紹

使用到漸層時需要使用到 [linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) 這個語法

### 如何實現漸層

linear-gradient 的語法，分別會有三個變數需要設定，以下為示範：

background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(252, 246, 221, 1));

第一個變數為漸層的方向，此示範為由上往下
第二個變數開頭的顏色(設定為完全透明)
第三個變數結尾的顏色(設定為背景顏色並透明度為1)

## 今日作業內容，實作「會員專屬文章」區塊之漸層效果

今天主題為實作以下頁面的漸層效果

### 內容建立作法一：
建立實體元素使用絕對定位的方式將該漸層物件遮蓋在內文與圖片上面。
可以使用此[模板](https://codepen.io/jmimiding4104/pen/YzoVbQg)，在 HTML 中新增一個元素，並為其設定相關 CSS 使漸層效果可以覆蓋在圖片上

### 內容建立作法二：
使用偽元素透過 CSS 建立一個元素遮蓋在內文與圖片上。
可以使用此[模板](https://codepen.io/jmimiding4104/pen/YzoVbQg)，將 `.gradient-overlay` 建立一個偽元素，並設定相關 CSS 使漸層效果可以覆蓋在圖片上

>什麼是偽元素？
>簡單來說就是一開始並不是建立於 HTML 的元素，透過 CSS 的加載編譯才進入畫面的元素，因為不是一開始就存在 HTML ，所以稱為偽元素。
>主要是透過 CSS 選擇器加上 ::before(放置於元素前)、::after(放置於元素後)建立元素，切記內容務必加上 content 才能建立出來(把元素內容建立，就算是空內容也需要寫上)。
>可參考以下網頁 [::before](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before) [::after](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after)

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

實體元素作法
https://codepen.io/jmimiding4104/pen/KKjdGjm

偽元素作法
https://codepen.io/jmimiding4104/pen/bGPdyGb

-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/dyBJzro) |
| 02 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/OJezxJj) |
|03|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/wvLprwP?editors=1100)|
|04|泊岸|[Codepen](https://codepen.io/qoq77416416/pen/vYqpJoK?editors=1100)|
| 05 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/BagJdgd) |
| 06 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/JjQMrNG) |
| 07 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/abgELBz) |
| 08 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/bGPaoWK) |
| 09 | kawa | [Codepen](https://codepen.io/z83xji6/pen/NWZXyPy) |
| 10 | wind | [Codepen](https://codepen.io/wind7y/pen/WNqdzMb) |
| 11 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/MWMrGeE?editors=1100) |
| 12 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/QWXaYpB?editors=1100) |
| 13 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/jOjYodJ) |
| 14 | Mike | [Codepen](https://codepen.io/mike2049/pen/YzoeXvZ?editors=1100) |
| 15 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/PorQPRL) |
| 16 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/MWMQaRJ?editors=1100) |
| 17 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/RwzQrNO)|
| 18 | xcx100 | [Codepen](https://codepen.io/c13026/pen/MWMQpQr) |
| 19 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/dyBdzax) |
| 20 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/PorQOrv?editors=1100)|
| 21 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/zYVRywR) |
| 22 | glen_69515|[Codepen](https://codepen.io/glenyaochih/pen/zYVjKJP)|
| 23 | Enn|[Codepen](https://codepen.io/enntang/pen/NWZMOyj)|
| 24 | anderson666|[Codepen](https://codepen.io/goodmanbuild/pen/XWLqQPg)|
| 25 | emmayo|[Codepen](https://codepen.io/emmayo/pen/WNqyvVX)|
| 26 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/QWXxJNa) |
| 27 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/RwzBRQG) |
| 28 | hao jing | [Codepen](https://codepen.io/hjxu/pen/KKjZKgd) |
| 29 | macihuang | [Codepen](https://codepen.io/macy1215/pen/KKjJpxJ) |
| 30 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/zYVXorL) |
| 31 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/VwJNXPm) |
| 32 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/ExBBBzq?editors=1100) |
| 33 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/dPywqRy?editors=1100) |

<!--
| No | Discord | [Codepen]() |
-->