html怎么设置透明色背景-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

html中设置透明色背景的方法：1、直接使用“backgroud:rgba(R,G, B, A)”设置透明色背景。2、先使用“backgroud:颜色值;”样式来设置背景色；然后使用“opacity:透明度值”来给背景色添加一个透明度即可。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

html设置透明色背景

在html中设置背景颜色透明的方法有两种：一种是通过rgba方式设置，另一种是通过backgroud和opacity设置。

1、rgba方式

所谓RGBA颜色，就是RGB三原色加ALPHA。在给背景添加颜色的同时，提供透明度特性。

用法：

1	`background:rgba(R,G, B, A);`

红色（R）：代表颜色中的红色成分，0 到 255 间的整数（也可以使用百分比 0% ~ 100%）。
绿色（G）：代表颜色中的绿色成分，0 到 255 间的整数（也可以使用百分比 0% ~ 100%）。
蓝色（B）：代表颜色中的蓝色成分，0 到 255 间的整数（也可以使用百分比 0% ~ 100%）。
透明度（A）：代表透明度，取值 0（完全透明）~1（完全不透明）之间。

下面我们就来看通过rgba方式设置背景颜色透明度的具体实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                line-height: 30px;
                text-align: center;
                margin: 0 auto;
            }
            .div1{
                background: rgba(220, 38, 38, 1);
            }
            .div2 {
                 
                background: rgba(220, 38, 38, 0.2);
            }
        </style>
    </head>
 
    <body>
        <div class="div1">背景颜色，没有设置透明度</div><br />
        <div class="div2">背景颜色，设置了透明度</div>
 
    </body>
 
</html>