css背景颜色透明度

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

/* 使用背景图片和半透明颜色叠加 */
.example-with-image {
  background: url('image.jpg') no-repeat center center, rgba(0, 0, 255, 0.3); /* 背景图片居中且不重复，叠加蓝色半透明背景 */
}

/* 使用透明度属性（注意：这会影响元素内所有内容的透明度） */
.transparent-element {
  opacity: 0.7; /* 元素及其所有子元素的透明度为70% */
}

解释说明：

1. background-color: rgba(255, 0, 0, 0.5);

   • rgba() 函数用于设置颜色，其中前三个参数分别是红、绿、蓝的值（范围是 0 到 255），第四个参数是透明度（范围是 0 到 1）。这里的 0.5 表示 50% 的透明度。

2. background: url('image.jpg') no-repeat center center, rgba(0, 0, 255, 0.3);

   • 这里使用了多层背景，首先是背景图片，然后是半透明的颜色叠加。no-repeat 表示图片不重复，center center 表示图片居中对齐。

3. opacity: 0.7;

   • opacity 属性设置整个元素及其子元素的透明度。值为 0.7 表示 70% 的透明度。需要注意的是，这会影响元素内的所有内容，包括文本和其他子元素。