# 🏅 Day 36 - Bootstrap position 與背景圖片遮罩設定

## Bootstrap position 與背景圖片遮罩設定
### position 第一部分
運用 [position](https://getbootstrap.com/docs/5.3/utilities/position/) 通用類別實作出第六週設計稿熱門主題區塊。

如下圖
> 

只需要將下方 HTML `***` (有四個內容需要修改)的部分增加 Boostrap position 通用類別，CSS 的部分不須更動。

**HTML**

<div class="container">
  <div class="row my-4">
    <div class="col-3">
      <div class="hot-topic hot-topic-1 position-***">
        <p class="position-absolute *** *** *** white fs-5 fw-bold">城市漫遊者</p>
      </div>
    </div>
  </div>
</div>

**CSS**

body {
  font-family: "Noto Serif TC", serif;
}
.hot-topic-1 {
  background-image: url("https://github.com/hexschool/2022-web-layout-training/blob/main/2024-week6/theme-1.png?raw=true");
}
.hot-topic {
  height: 200px;
  background-size: cover;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.white {
  color: white;
  z-index: 1;
}

### 背景圖片遮罩設定 第二部分

透過偽元素與透明的技巧，實作出當 hover 時出現半透明之遮罩效果。

>創立一個偽元素半透明之黑色區塊，並將這個偽元素設定透明。

>透過 hover 的設定將上述之偽元素透過偽元素呈現。

>什麼是偽元素？
>簡單來說就是一開始並不是建立於 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)

只需要將下方 CSS `***` (三處)設定上述數值。

HTML 延續上方之內容

body {
  font-family: "Noto Serif TC", serif;
}
.hot-topic-1 {
  background-image: url("https://github.com/hexschool/2022-web-layout-training/blob/main/2024-week6/theme-1.png?raw=true");
}
.hot-topic {
  height: 200px;
  background-size: cover;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.white {
  color: white;
  z-index: 1;
}
.hot-topic::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: ***;
  opacity: ***;
  transition: opacity 0.3s;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.hot-topic:hover::after {
  opacity: ***;
  cursor: pointer;
}

## 回報流程

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


<!-- 解答：
https://codepen.io/jmimiding4104/pen/wvbZOxg

-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/WNqZgdJ)|
| 02 | anderson666 |[Codepen](https://codepen.io/goodmanbuild/pen/JjQraBd)|
|03|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/GRbMXwv)|
| 04 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/LYKzJaZ) |
| 05 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/dyBVqEN) |
| 06 | Hedwig | [Codepen](https://codepen.io/adirehfz-the-encoder/pen/RwzLYXL) |
| 07 | kawa | [Codepen](https://codepen.io/z83xji6/pen/rNEGqBN) |
| 08 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/XWLexMd)|
| 09 | yoishere |[Codepen](https://codepen.io/yoishere/pen/BagwqoP)|
| 10 | NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/OJexBpB)|
| 11 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/BagwqVb) |
| 12 | 俊 | [Codepen](https://codepen.io/jun12079/pen/eYwGPxB) |
| 13 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNEyQKB) |
| 14 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/jOjGQVM) |
| 15 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/VwJMqBK) |
| 16 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/NWZaoXm?editors=1100) |
| 17 | haojing | [Codepen](https://codepen.io/hjxu/pen/XWLerEM) |
| 18 | KUN. | [Codepen](https://codepen.io/barry91205/pen/GRbMLYE) |
| 19 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/XWLeQyv?editors=1100) |
| 20 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/dyBVEBK?editors=1100) |
| 21 | wind | [Codepen](https://codepen.io/wind7y/pen/NWZaZBR) |
| 22 | MYP | [Codepen](https://codepen.io/pmyfr/pen/VwJrYxa) |
| 23 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/abgVvgQ)|
| 24 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/KKjXxKZ)
| 25 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/YzoEWNd)|
| 26 | Kaya |[Codepen](https://codepen.io/kayaribi/pen/oNroYgY)|
| 27 | kaka_945 |[Codepen](https://codepen.io/kay945/pen/eYweKpw)|
| 28 | PoWei |[Codepen](https://codepen.io/Po-Wei-Lai/pen/MWMOBLE)|
| 29 | zaoannihao | [codepen](https://codepen.io/ckhwdvrx-the-solid/pen/gONoGwx)|
| 30 | xcx100 | [Codepen](https://codepen.io/c13026/pen/NWZXwZN) |
| 31 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/xxopMJV?editors=1100) |
| 32 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/Rwzxdyq) |
| 33 | Mike | [Codepen](https://codepen.io/mike2049/pen/LYKevxq?editors=1100)
| 34 | Glen—69515|[Codepen](https://codepen.io/glenyaochih/pen/XWLZQje?editors=0100)|
| 35 | jasonlin|[Codepen](https://codepen.io/gfswkraq-the-reactor/pen/LYKdOVZ)|
| 36 | Enn|[Codepen](https://codepen.io/enntang/pen/bGPMvWM)|
| 37 | emmayo |[Codepen](https://codepen.io/emmayo/pen/oNryXGO)|
| 38 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/XWLBbzV?editors=1100) |
| 39 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/dyBjYXy) |
| 40 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/oNrMzKq) |
| 41 | huangmaci | [Codepen](https://codepen.io/macy1215/pen/jOjdONo) |
| 42 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/PorLQPz) |
| 43 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/GRbeVjz) |
| 44 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/xxooXjJ?editors=1100) |
| 45 |Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/rNXaYgY) |
| 46 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/pvoQByV) |

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