css透明度属性-css如何设置背景色为透明？ css中设置背景色透明度的两种方法

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在网页布局中，有时为了网页的整体美观，可能需要将网页的个别部分的背景色设置为透明，那么如何将背景色设置为透明呢？ 本文将为大家介绍CSS中设置背景色透明的技巧。

css中设置背景色透明度有两种方法：一种是通过rgba方法设置，另一种是通过background和opacity设置。

接下来我们看看这两个方法在css中实现背景色透明的具体例子

1.通过background和opacity设置背景颜色为透明

background属性中的属性值比较简单，这里就不赘述了，这里简单介绍一下opacity属性

opacity属性参数的“不透明度”用数字表示，范围为0.0到1.0，完全透明为0.0，完全不透明为1.0。 换句话说，数字越大，元素越不透明。 该参数不仅可以使用“opacity”css透明度属性，还可以继承父图层属性，但浏览器支持较差，不建议使用。

看完两个属性的介绍，我们来看一下通过backgroud和opacity设置背景色透明度的具体例子

代码如下所示：

<div class="box"></div>
.box{
 width:300px; 
 height:200px; 
 margin:0 auto; 
 border:1px solid #ccc; 
 background:red; 
 opacity:0.2;  
}

背景色透明效果如下：

说明：通过backgroud和opacity设置背景颜色的透明度。 如果背景有文字，文字也会变成透明的，就像下面的效果

所以要根据情况使用这些技巧来设置背景色透明。

2.通过rgba方法设置背景色为透明

所谓RGBA颜色就是RGB三基色加上ALPHA。 提供透明功能，同时为背景添加颜色。

用法：背景：rgba(R,G,B,A);

接下来我们看一个通过rgba方法设置背景色透明度的具体例子：

<div class="title_div">背景颜色透明</div>
.title_div{ 
 width: 200px;
 height: 200px; 
 line-height: 30px;
 text-align: center;
 margin:0 auto;
 background-color:rgba(220,38,38,0.2);
}

rgba方法设置背景色透明度的效果如下：

注意：通过rgba方法设置背景色的透明度，可以设置背景色透明但文字不透明，而且这些技术的兼容性不好css透明度属性，不兼容ie浏览器