css背景透明度

作者：尛丸子的天真▍我学不会゜发布日期:2026-06-20 浏览:62

/* 设置背景透明度的示例代码 */

/* 方法1: 使用 rgba() 函数 */
body {
  /* 背景颜色为红色，透明度为0.5 (半透明) */
  background-color: rgba(255, 0, 0, 0.5);
}

/* 方法2: 使用 hsla() 函数 */
div {
  /* 背景颜色为蓝色，透明度为0.3 (较透明) */
  background-color: hsla(240, 100%, 50%, 0.3);
}

/* 方法3: 使用 opacity 属性 (注意：这会影响整个元素及其子元素的透明度) */
section {
  /* 整个元素的透明度为0.7 */
  opacity: 0.7;
  background-color: #00ff00; /* 绿色背景 */
}

解释说明：

rgba() 和 hsla() 函数允许你直接设置背景颜色的透明度，而不影响其他元素。a 表示 alpha 通道，取值范围是 0（完全透明）到 1（完全不透明）。
opacity 属性可以设置整个元素及其子元素的透明度，取值范围同样是 0 到 1。

上一篇：visibility在css中的用法

下一篇：css 加载动画