如何使盒子半透明
本指南將幫助您瞭解如何使用 CSS 使盒子半透明。
更改盒子和內容的不透明度
如果您希望盒子及其所有內容都更改不透明度，則 CSS 的 opacity 屬性是您需要使用的工具。不透明度與透明度相反；因此，opacity: 1 表示完全不透明——您將完全無法透過盒子看到。
使用 0 值將使盒子完全透明，這兩個值之間的值將改變不透明度，較高的值表示透明度較低。
僅更改背景色的不透明度
在許多情況下，您可能只想使背景顏色本身部分透明，同時保持文字和其他元素完全不透明。要實現此目的，請使用具有 alpha 通道的 <color> 值，例如 rgb()。與 opacity 一樣，alpha 通道值的 1 值使顏色完全不透明。因此，background-color: rgb(0 0 0 / 50%); 將使背景顏色設定為 50% 不透明度。
嘗試更改以下示例中的不透明度和 alpha 通道值，以檢視盒子後面背景影像的更多或更少部分。
注意：在您將影像疊加的情況下，請注意您的文字與背景保持足夠的對比度；否則，您可能會使內容難以閱讀。