css透明盒子制作

使用 opacity 属性

设置 opacity: 0.5; 可以让盒子及其内容整体透明，值为 0（完全透明）到 1（完全不透明）。

.transparent-box {
  opacity: 0.5;
  background-color: #000;
  width: 200px;
  height: 200px;
}

使用 rgba 或 hsla 颜色

通过 rgba 或 hsla 设置背景色透明度，仅影响背景，不影响内容文字。

.transparent-box {
  background-color: rgba(0, 0, 0, 0.5); /* 黑色，50%透明度 */
  width: 200px;
  height: 200px;
}

使用 transparent 关键字

直接设置 background-color: transparent; 会让背景完全透明。

.transparent-box {
  background-color: transparent;
  border: 1px solid #000; /* 添加边框以显示盒子范围 */
  width: 200px;
  height: 200px;
}

结合 backdrop-filter（毛玻璃效果）

通过 backdrop-filter: blur(5px); 实现透明背景的模糊效果，适合模态框等场景。

.transparent-box {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  width: 200px;
  height: 200px;
}

注意事项

• opacity 会影响盒子内所有内容（包括子元素）。
• rgba 仅影响背景色，文字或其他内容需单独设置透明度。
• backdrop-filter 兼容性较差，需测试浏览器支持情况。