设置背景透明度分为两种：一种背景为颜色设置的纯色背景；另一种是图片做背景。
【情况一】纯色背景
关键代码：background:rgba(R,G,B,A)
- RGB--------三原色（red,green,bule）
- A-------透明度
关于三原色最终成型的颜色，可以用画图软件进行参考。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例代码一</title><style>div { width:200px; height: 200px; }</style>
</head>
<body>
<div style="background-color: green"></div>
<hr>
<div style="background-color:rgba(0,255,0,0.5)"></div>
</body>
</html>示例输出：
【情况二】图片背景
关键代码：filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60;
- filter:alpha(opacity=60); /*支持 IE 浏览器*/
- -moz-opacity:0.60; /*支持 FireFox 浏览器*/
- opacity:0.60; /*支持 Chrome, Opera, Safari 等浏览器*/
示例代码一：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例代码二</title>
</head>
<body style="background-image: url('qinghua.jpg');background-repeat: no-repeat">
</body>
</html>示例输出一:
示例代码二：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例代码二</title><style>.book{width: 100%;filter:alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.4;background: url("qinghua.jpg");background-repeat: no-repeat;}</style>
</head>
<body>
<div class="book"><h1>我爱学习</h1><h1>学习爱我</h1><h1>沉迷学习</h1><h1>无法自拔</h1>
</div>
</body>
</html>示例输出二：
注意：当针对图像背景修改透明度时，需结合div一起使用。 在背景图片颜色变淡的同时，背景上的文本字的颜色也会随之变淡。
