css制作透明div

使用 opacity 属性

设置 opacity 属性可以控制元素及其内容的透明度，取值范围为 0（完全透明）到 1（完全不透明）。

div {
  opacity: 0.5;
}

使用 rgba 颜色值

通过 rgba 颜色值设置背景色，可以单独控制背景的透明度，不影响子元素。

div {
  background-color: rgba(255, 255, 255, 0.5);
}

使用 hsla 颜色值

与 rgba 类似，hsla 颜色值也可以设置透明度，但使用色相、饱和度、亮度的颜色模型。

div {
  background-color: hsla(0, 100%, 50%, 0.5);
}

使用 transparent 关键字

将背景色设置为完全透明。

div {
  background-color: transparent;
}

使用 backdrop-filter 属性

为元素后面的区域添加模糊或其他效果，同时保持元素内容清晰。

div {
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.3);
}