css如何设置背景颜⾊透明？css设置背景颜⾊透明度的两种⽅法介绍
在⽹页布局中有时为了⽹页的整体美观，可能需要将⽹页中的某些部分设置为背景颜⾊透明，那么如何设置背景颜⾊透明呢？本篇⽂章就来给⼤家介绍⼀下css设置背景颜⾊透明的⽅法。
在css中设置背景颜⾊透明的⽅法有两种：⼀种是通过rgba⽅式设置，另⼀种是通过backgroud和opacity设置。
下⾯我们就来分别看看css中这两种⽅法实现背景颜⾊透明的具体实例
1、通过backgroud和opacity设置背景颜⾊透明
background属性中属性值⽐较简单，这⾥就不细说了，我们在这⾥来简单看看opacity属性
opacity属性参数的＂不透明度＂是以数字表⽰，从 0.0 ⾄ 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，换句话说，数字越⼤代表元素越不透明。参数除了可以使⽤＂不透明度＂之外，还有 inherit 继承⽗层属性，不过浏览器⽀援度较差，不建议使⽤。
看完了对于两种属性的介绍，下⾯我们就来看通过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。在给背景添加颜⾊的同时，提供透明度特性。
⽤法：background: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);
cssclass属性}
rgba⽅式设置背景颜⾊透明度效果如下：
说明：通过rgba⽅式设置背景颜⾊透明度，可以设置背景颜⾊透明⽽⽂字不透明，但是这种⽅法的兼容性不好，不兼容ie浏览器

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。