(場景快速轉換到兔大王公司)
兔老闆：
「這個 logo 要有一點陰影，沒有底色也太單調」
「然後這個浮水印刷淡點啊，字都看不到了」
「最好是顏色豐富、撞色一點，你懂中華民國美學嗎？」
「大概就這樣，你先再去修一下」
兔員工：
「好...」
「唉，兔老闆又改需求了！」
「昨天，說要簡潔有力 ... 今天，又說不夠氣派！」
「算了，多做事少說話，不然等等又被覺得在偷懶。」
兔員工面對慣兔老闆的刁難，到底怎麼做比較好呢？
就讓我們繼續，看下去。
令人眉頭一皺的案情這邊是那名員工要修改的文件
<doc class="flex flex-col items-center">
<logo class="border rounded-xl w-32 h-32 p-5 my-3">
<img class="w-full" src="https://i.imgur.com/FTAvuYj.png">
</logo>
<main class="flex justify-center items-center">
<content class="text-lg">
<span class="text-3xl font-bold block mb-3">沿革</span>
兔大王公司成立於 2021 年。主要業務範圍是製作高科技紅蘿蔔，
同時也是知名團體兔兔教的開運紅蘿蔔御用製作廠商。<br>
創辦人兔大王白手起家，早在十年多前，一開始賣的都是普通的發光紅蘿蔔，而非現在的高科技紅蘿蔔。
兔大王堅持每根發光紅蘿蔔都是純手工打造，且還要保持相同的質感與水準。<br>
現今雖然高科技紅蘿蔔的生產極度仰賴機器，但精神不變。每根產出的高科技紅蘿蔔皆為手工脫模、檢查及包裝。
</content>
<sign class="bg-gray-400">
兔大王公司
</sign>
</main>
</doc>
這 ... 就是你要修改的文件嗎 ...？
做成這樣難怪會被老闆退件啊！
兔員工：
「可是 ... 好像沒有更好的辦法了啊」
「老闆說加 logo 和浮水印 ... 就加了」
蛤 ... 叫你加可不是加上去就好啦，阿呆兔！
要加的好看、不突兀！
算了用講的你不會明白，我示範一次吧～
嗯？ 你們說你們也要看？
好啊，我放雲端給你們，來，在這裡。
沒問題的話，那就開始來動手囉！
陰影 (box-shadow)藉由 shadow-{陰影量} 這個功能，我們可以設定 / 改變區塊的陰影，例如 shadow-inner 功能是為區塊加上內陰影。
以下是預設可以使用的陰影功能：
既然兔老闆第一個提到的是陰影，那我們就先來做陰影的部分吧。使用 shadow-lg 來加上大量級 (large) 的陰影，我們也順便來用 bg-yellow-200 弄上個背景色：
<doc class="flex flex-col items-center">
<logo class="border rounded-xl w-32 h-32 p-5 my-3 shadow-lg bg-yellow-200">
<img class="w-full" src="https://i.imgur.com/FTAvuYj.png">
</logo>
<main class="flex justify-center items-center">
...
有～可以。
阿呆兔你看，其實要有質感並不難啊！
接下來老闆說要調什麼？
兔員工：
「我看一下，是浮水印的部分」
浮水印嗎？ 好，這也不難～
背景不透明度 (background-opacity)藉由 bg-opacity-{不透明度} 這個功能，我們可以設定 / 改變 元素的背景色彩不透明度，例如 bg-opacity-0 功能是元素的背景色彩不透明度設為 0 %，也就是完全透明。
以下是預設可以使用的背景不透明度功能：
聽起來可能有點拗口，其實所謂的不透明度是指數字越低越透明，數字越高越不透明。
我們這邊用 bg-opacity-20 讓背景色彩的不透明度變為 20 %：
...
<sign class="bg-gray-400 bg-opacity-20">
兔大王公司
</sign>
</main>
</doc>
OK，那個背景色變得沒有這麼深了，但是字還是很深。
我們接下來調整文字吧！
文字不透明度 (text-opacity)藉由 text-opacity-{不透明度} 這個功能，我們可以設定 / 改變 元素內文字的不透明度，例如 text-opacity-0 功能是把元素的文字不透明度設為 0 %，也就是完全透明。
以下是預設可以使用的文字不透明度功能：
跟背景不透明度相同，數字越低越透明，數字越高越不透明。
我們這邊用 text-opacity-30 讓文字的不透明度變為 30 %：
...
<sign class="bg-gray-400 bg-opacity-20 text-opacity-30">
兔大王公司
</sign>
</main>
</doc>
看起來都可以了，但是胡蘿蔔是不是 ... 沒有調到？
因為胡蘿蔔是背景圖片啦，那我想到了。
把剛剛做的都復原，我們來用更快的方法～
不透明度 (opacity)藉由 opacity-{不透明度} 這個功能，我們可以設定 / 改變 元素的不透明度，例如 opacity-0 功能是把元素的不透明度設為 0 %，也就是完全透明。
以下是預設可以使用的元素不透明度功能：
也跟背景不透明度、文字不透明度相同，數字越低越透明，數字越高越不透明。 只是元素不透明度會改變整個元素 (包含所以子元素及內容) 的透明度。
我們把前面的背景不透明度和文字不透明度去掉，改用 opacity-30 讓整個元素的不透明度變為 30 %：
...
<sign class="bg-gray-400 opacity-30">
兔大王公司
</sign>
</main>
</doc>
哈！ 完成了！
這樣就有浮水印，又不會影響閱讀了！
可以準備去交件囉～ 這件功勞算你自己的，阿呆兔。
兔員工：
「謝謝兔兔，終於 ... 可以交件了」 (泣
透過幫阿呆兔員工做這份文件，
有沒有剛好直接上手了不透明度與陰影呢？
希望阿呆兔不會再被退件了，希望。
是說 ...
你們也要交一份給我啊！ 別以為可以躲掉！
給你們的回家作業：關於兔兔們：
( # 兔兔小聲說 )
兔老闆：
「不錯嘛，唸你一下馬上就做好了，其實你還是做得到的啊。 那，既然你都可以完成了，想必接下來這個對你來說也不困難的啦～我覺得啊其實現在這樣很不錯，但是還可以在簡潔一點，再去改改吧！」兔員工：
「好，知道了，我現在馬上去弄。」
(轉身離開兔老闆辦公室)兔員工：
「兔兔～！」 (QQ诶....！ 又要改了！？
iThome鐵人賽
看影片追技術