如何使盒子半透明
本指南將幫助您瞭解如何使用 CSS 使盒子半透明。
更改框體和內容的透明度
如果您希望框體及其所有內容都改變透明度，那麼 CSS 的 opacity 屬性就是您需要使用的工具。透明度是“不透明度”的反義詞；因此 opacity: 1 是完全不透明的——您將完全看不到盒子內部。
使用 0 的值將使框體完全透明，而介於兩者之間的值將改變不透明度，值越高透明度越低。
僅更改背景顏色的透明度
在許多情況下，您只想讓背景顏色本身部分透明，而保持文字和其他元素的完全不透明。要實現這一點，請使用具有 alpha 通道的 <color> 值，例如 rgb()。與 opacity 一樣，alpha 通道值為 1 會使顏色完全不透明。因此，background-color: rgb(0 0 0 / 50%); 將背景顏色設定為 50% 的不透明度。
嘗試在下面的示例中更改不透明度和 alpha 通道值，以檢視盒子後面背景影像的多少。
html
<div class="wrapper">
<div class="box box1">This box uses opacity</div>
<div class="box box2">
This box has a background color with an alpha channel
</div>
</div>
css
.box1 {
background-color: black;
color: white;
opacity: 0.5;
}
.box2 {
background-color: rgb(0 0 0 / 0.5);
color: white;
}
注意： 如果您正在疊加影像，請注意您的文字與背景保持足夠的對比度；否則，您可能會使內容難以閱讀。