css 背景图片透明

CSS是一门用于美化页面的前端语言。通过CSS，我们可以改变网页的样式，包括背景颜色、字体、大小、间距等等。

其中，背景图片是CSS中常用的一个属性，我们可以通过设置背景图片来为页面增添美感。而通过另一个属性 - opacity，我们可以实现背景图片的透明效果。

/* 原始背景图片 */
div {
  background-image: url('example.jpg');
  width: 300px;
  height: 200px;
}

/* 设置透明度为50%的背景图片效果 */
div {
  background-image: url('example.jpg');
  opacity: 0.5;
  width: 300px;
  height: 200px;
}

在上述代码中，我们可以看到通过设置opacity的值为0.5，使得原始背景图片的透明度降低了50%。

不仅如此，我们还可以通过设置rgba来实现更加精细的透明度控制。rgba由红、绿、蓝三个颜色通道和一个alpha通道组成，其中alpha通道可以控制颜色的透明度。我们可以通过修改alpha通道的值来改变背景图片的透明度。

/* 使用rgba设置透明度为80%的背景图片效果 */
div {
  background-color: rgba(255,255,0.8);
  width: 300px;
  height: 200px;
}

在上述代码中，我们可以看到通过设置rgba的第四个参数为0.8，使得背景颜色的透明度变成了80%。

总之，利用CSS中的opacity和rgba属性，我们可以灵活地控制背景图片的透明效果，为网页的视觉效果增添了更多的可能性。