2024-12-28 CSS讓背景變灰

發表於 閱讀次數：
2024-12-28 CSS讓背景變灰

2024-12-28 CSS讓背景變灰

CSS讓背景變灰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
```css

對！你完全理解正確！👏

這段 `.modal-backdrop` 的 CSS 的確就是用來**讓背景變灰、並置中 modal 視窗**的。來，我幫你逐行解析：

---

### 🔍 `.modal-backdrop` 的每個屬性解釋：

```css
.modal-backdrop {
  position: fixed;

➡️ 固定定位：讓背景遮罩浮在畫面上，不會因為頁面滾動而消失。

1
2
3
4
top: 0;
left: 0;
width: 100%;
height: 100%;

➡️ 覆蓋整個畫面：從左上角開始，占滿整個螢幕。

1
background-color: rgba(0, 0, 0, 0.4);

➡️ 半透明黑背景：這就是讓背景變灰的關鍵。rgba(0, 0, 0, 0.4) 表示黑色但透明度 40%。

1
2
3
display: flex;
justify-content: center;
align-items: center;

➡️ 置中 modal：使用 flex 盒模型，讓子元素（你的 modal 視窗）水平與垂直置中。

💡 小技巧補充：

如果你想讓灰背景更暗或更淺，可以調整透明度這個值：

1
2
rgba(0, 0, 0, 0.2) // 淺灰
rgba(0, 0, 0, 0.6) // 深灰

如果你想做出更美的 modal 效果（像動畫、彈出縮放等），我也可以幫你加上哦 😄
要加嗎？還是先做下一步功能？