如何使盒子半透明
本指南将帮助您了解如何使用 CSS 使盒子半透明。
更改盒子和内容的不透明度
如果您希望盒子及其所有内容都更改不透明度，则 CSS 的 opacity 属性是您需要使用的工具。不透明度与透明度相反；因此，opacity: 1 表示完全不透明——您将完全无法透过盒子看到。
使用 0 值将使盒子完全透明，这两个值之间的值将改变不透明度，较高的值表示透明度较低。
仅更改背景色的不透明度
在许多情况下，您可能只想使背景颜色本身部分透明，同时保持文本和其他元素完全不透明。要实现此目的，请使用具有 alpha 通道的 <color> 值，例如 rgb()。与 opacity 一样，alpha 通道值的 1 值使颜色完全不透明。因此，background-color: rgb(0 0 0 / 50%); 将使背景颜色设置为 50% 不透明度。
尝试更改以下示例中的不透明度和 alpha 通道值，以查看盒子后面背景图像的更多或更少部分。
注意：在您将图像叠加的情况下，请注意您的文本与背景保持足够的对比度；否则，您可能会使内容难以阅读。