css background 透明度

作者：狂战天下发布日期:2025-07-09 浏览:76

/* 设置背景颜色并添加透明度 */
body {
  background-color: rgba(0, 0, 255, 0.5); /* 蓝色背景，透明度为0.5 */
}

/* 使用背景图片并设置其透明度 */
div {
  background: url('image.jpg') no-repeat center center;
  background-size: cover;
  opacity: 0.7; /* 整个 div 的透明度为0.7 */
}

/* 仅设置背景颜色的透明度而不影响其他元素 */
.example {
  background: rgba(255, 0, 0, 0.3); /* 红色背景，透明度为0.3 */
}

解释说明：

rgba()：使用 rgba() 函数可以为背景颜色设置透明度。rgba() 的第四个参数是透明度（alpha），取值范围为 0（完全透明）到 1（完全不透明）。
opacity：opacity 属性可以设置整个元素的透明度，包括背景、文本和子元素。它的取值范围也是 0 到 1。
仅设置背景透明度：如果你只想改变背景的透明度而不影响其他元素，建议使用 rgba() 或 hsla() 来设置背景颜色的透明度，而不是使用 opacity。

上一篇：css 加下划线

下一篇：css边框发光效果