css透明度的设置方法

css设置透明度的方法有：rgba()，opacity，filter:opacity(%)

rgba()透明度的设置方法

html代码

<h1>hello world</h1>

css代码

h1{
background:rgba(255,0,0,0.5);
}

这样就得到了红色半透明的背景和文字

opacity属性透明度的设置方法

在 CSS3 中，增加了一个 opacity 属性，使用此属性可以设置元素的透明度。opacity属性具有继承性，会使容器中的所有元素都具有透明度；

html代码

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

css代码

.box1{
position:relative;
width:200px;height:200px;
background-color: #00f;
z-index:10;
opacity:0.5;
}
.box2{
position:absolute;
top:80px;
left:80px;
width:200px;
height:200px;
background-color:#0f0;
z-index:5;
opacity:0.5;
}
.box3{
position:relative;
width:200px;
height:200px;
background-color:#f00;
z-index:1;
opacity:0.5;
}

filter:opacity(%)透明度设置方法

filter属性是将过滤器效果应用于web页面上的元素(主要是图像)的CSS方法；可以通过设置opacity()值，来设置图像的不透明度效果。0％不透明度表示元素完全透明，如果不透明度为100％，则表示原始图像。

html代码

<img class="opacity1" src="1.jpg">

css代码

.opacity1{
opacity: 0.5;
filter: none;
}