当前位置:

CSS如何用opacity设置背景颜色透明度

建网站时,我们通过background属性设置背景颜色,默认情况下背景颜色的透明度为0。我们可以通过CSS代码来控制背景的透明度。

控制背景透明度的属性是:


filter:alpha(opacity:50); opacity:0.5; -moz-opacity:0.5;-khtml-opacity: 0.5;

设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度

举例:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明度</title>
<style>
.demo{
  padding: 25px;
  background-color:#000000;
  filter:alpha(opacity:50); opacity:0.5;  -moz-opacity:0.5;-khtml-opacity: 0.5;
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    
 
<div class="demo">
    <p>背景透明,文字也透明</p>
</div>
</body>

除了以下的方式之外,还可以通过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);
}

这样也可以设置一个DIV的透明度。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注