如何使盒子半透明
本指南将帮助您了解如何使用 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;
}
注意： 如果您正在叠加图像，请注意您的文本与背景保持足够的对比度；否则，您可能会使内容难以阅读。