Bootstrap - 不透明度：讓事物變得透明

Hello there, future web design superstars! Today, we're going to dive into a fascinating aspect of Bootstrap that can add a touch of magic to your web pages - opacity. Imagine being able to make elements on your website appear ghostly or see-through. Sounds cool, right? Well, that's exactly what we're going to learn!

Bootstrap - Opacity

什麼是不透明度？

在我們深入研究 Bootstrap 的具體用法之前，讓我們先了解在網頁設計世界中不透明度是什麼意思。

不透明度指的是元素有多透明或多透光。它在一個從 0 到 1 的刻度上被衡量：

0 意味著完全透明（無形）
1 意味著完全不透明（實心）
之間的任何值都會創造不同程度的不透明度

把它想像成一扇窗戶。一扇清晰的窗戶有不透明度（接近 1），而一扇有霧的窗戶有不透明度（接近 0）。

Bootstrap 的不透明度類別

現在，讓我們看看 Bootstrap 如何讓我們輕鬆地將不透明度應用到我們的元素上。Bootstrap 提供了一套現成的類別，我們只需簡單地將它們添加到我們的 HTML 元素中。以下是他們：

類別	不透明度值
.opacity-100	1
.opacity-75	0.75
.opacity-50	0.5
.opacity-25	0.25
.opacity-0	0

相當直接了當，對吧？讓我們來看看它們的作用！

示例 1：基本不透明度

<div class="bg-primary p-3 opacity-100">這是 100% 不透明</div>
<div class="bg-primary p-3 opacity-75">這是 75% 不透明</div>
<div class="bg-primary p-3 opacity-50">這是 50% 不透明</div>
<div class="bg-primary p-3 opacity-25">這是 25% 不透明</div>
<div class="bg-primary p-3 opacity-0">這是 0% 不透明（無形）</div>

在這個示例中，我們創建了五個 <div> 元素，每個都有不同的不透明度類別。bg-primary 類別給它們一個藍色背景，而 p-3 添加了一些內距。你會看到一個漸變效果，因為 divs 變得更加透明。

示例 2：圖像上的不透明度

不透明度不僅僅適用於背景。讓我們在圖像上試試：

<img src="cute-puppy.jpg" class="opacity-50" alt="一隻可愛的小狗">

這會以 50% 不透明度顯示圖像。這就像通過一扇稍微有霧的窗戶看小狗！

結合不透明度與其他效果

當我們開始將不透明度與其他 Bootstrap 類別結合時，真正的樂趣才開始。讓我們來創意一下吧！

示例 3：懸停效果

<style>
.hover-effect:hover {
opacity: 1 !important;
}
</style>

<div class="bg-success p-3 opacity-50 hover-effect">
在我上面滑鼠移動來清楚地看到我！
</div>

在這個示例中，我們創建了一個默認為 50% 不透明的 div。但是當你將滑鼠移動到它上面時，它會變得完全透明。我們 CSS 中的 !important 確保我們的懸停效果優先於 Bootstrap 的不透明度類別。

示例 4：背景上的文字

<div class="position-relative">
<img src="landscape.jpg" class="w-100 opacity-50" alt="美麗的風景">
<div class="position-absolute top-50 start-50 translate-middle text-center">
<h2>歡迎來到天堂</h2>
<p>這裡是夢想成真的地方</p>
</div>
</div>

在這裡，我們將文字放置在圖像上方。通過將圖像設定為 50% 不透明度，我們確保文字在背景上清晰突出。

實際應用

現在我們已經看到了如何使用不透明度，讓我們來談談你可能在什麼時候會想要使用它：

覆蓋層：在圖像或視頻上創建半透明的覆蓋層，以使文字更易於閱讀。
懸停效果：當滑鼠悬停時，使元素改變不透明度以創造交互式效果。
背景：使用半透明背景為你的設計增加深度，而不會压倒其他元素。
禁用的元素：應用較低的不透明度以表示元素已被禁用或未激活。

一個警告

雖然不透明度可以創造出美麗的效果，但請記住網頁設計的黃金法則：不要為了美觀而犧牲可用性。始終確保你的內容保持可讀性，並且界面保持可用。

結論

那就這樣吧，各位！你剛剛解鎖了 Bootstrap 中的不透明度力量。從創造幽靈般的元素到製作美麗的覆蓋層，你現在在網頁設計工具箱中有了新的工具。

記住，掌握不透明度的關鍵在於實驗。不要害怕嘗試不同的值和組合。誰知道呢？你可能會偶然發現網頁設計的下一個大趨勢！

繼續編程，繼續創造，最重要的是，享受其中的樂趣！直到下次見，這是你的友好鄰居電腦老師告別。編程愉快！

Credits: Image by storyset