CSS - 遮罩：初學者指南，打造動態網頁效果

Hello there, future web design superstars! Today, we're going to dive into the fascinating world of CSS overlays. Don't worry if you're new to this – I remember my first time learning about overlays, and I promise you'll find it both fun and rewarding. So, let's embark on this journey together!

什麼是 CSS 遮罩？

在我們深入研究代碼之前，讓我們先了解遮罩是什麼。想像你正在欣賞一幅美麗的油畫，突然有人在其上放置一張透明的紙張，上面有一些文字。遮罩在網站上做的就是這樣的事情——它在現有內容上添加一個額外的層，通常用於提供額外信息或創造視覺效果。

CSS 遮罩 - 基本範例

讓我們從一個簡單的遮罩範例開始。這裡是 HTML 和 CSS 代碼：

<div class="container">
<img src="cute-puppy.jpg" alt="A cute puppy">
<div class="overlay">
<div class="text">Hello, I'm a puppy!</div>
</div>
</div>

.container {
position: relative;
width: 100%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

讓我們分解一下：

1. 我們有一個容器，其中包含一張圖片和一個遮罩 div。
2. 遮罩在容器中以絕對定位。
3. 初始時，遮罩的透明度為 0（不可見）。
4. 當我們將滑鼠悬停在容器上時，遮罩的透明度變為 1（完全可見）。
5. 文字在遮罩中居中顯示。

CSS 遮罩 - 從上至下滑動效果

現在，讓我們添加一個滑動效果來讓事情更有趣！這是我們如何修改 CSS 來讓遮罩從上至下滑動：

.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}

.container:hover .overlay {
bottom: 0;
height: 100%;
}

在這個範例中，遮罩從圖片上方開始（bottom: 100%）並沒有高度。當悬停時，它會滑動下來覆蓋整個圖片。

CSS 遮罩 - 從下至上滑動效果

如果我們想要遮罩從下往上滑動呢？簡單得很！只需更改幾行代碼：

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}

.container:hover .overlay {
height: 100%;
}

現在遮罩從底部開始並向上擴展。

CSS 遮罩 - 從左至右滑動效果

讓我們換個方式，讓遮罩從左至右滑動：

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 100%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
right: 0;
}

在這裡，遮罩從左側開始沒有寬度，並在悬停時擴展到全寬度。

CSS 遮罩 - 從右至左滑動效果

當然，我們也可以讓它從右至左滑動：

.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
left: 0;
}

這次，遮罩從右側開始並向左滑動。

CSS 遮罩 - 淡入效果

記得我們的第一個範例嗎？那實際上是一個淡入效果！但讓我們讓它更平滑：

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

這會在悬停時創造一個平滑的淡入效果。

CSS 遮罩 - 圖片標題遮罩

讓我們創建一個在悬停時顯示圖片標題的遮罩：

<div class="container">
<img src="cute-puppy.jpg" alt="A cute puppy" class="image">
<div class="overlay">
<div class="title">Adorable Puppy</div>
</div>
</div>

.container {
position: relative;
width: 100%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}

.container:hover .overlay {
opacity: 1;
}

這會創建一個從底部出現的標題遮罩。

CSS 遮罩 - 圖片圖標遮罩

現在，讓我們為圖片添加一個圖標遮罩：

<div class="container">
<img src="cute-puppy.jpg" alt="A cute puppy" class="image">
<div class="overlay">
<a href="#" class="icon" title="User Profile">
<i class="fa fa-user"></i>
</a>
</div>
</div>

.container {
position: relative;
width: 50%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.fa-user:hover {
color: #eee;
}

這會在中心位置創建一個在悬停時出現的圖標遮罩。

CSS 遮罩 - 相關屬性

這裡是一個常用於 CSS 遮罩的屬性表格：

屬性	描述
position	設置定位方法
top, bottom, left, right	指定遮罩的位置
width, height	設置遮罩的尺寸
opacity	控制遮罩的透明度
transition	定義遮罩出現/消失的方式
background-color	設置遮罩的顏色
z-index	控制元素的堆疊順序

那就這樣吧，各位！你剛學會了 CSS 遮罩的基本知識。記住，熟能生巧，所以不要害怕嘗試這些範例。誰知道呢？你可能會創造出網頁設計的下一個大趨勢！快樂編程，願你的遮罩總是平滑，過渡總是流暢！

Credits: Image by storyset