CSS设置背景透明效果

CSS设置背景透明效果

设置背景透明效果有两种方法：

• 使用opacity属性定义透明度，范围0-1,0表示完全透明，1表示不透明，优点：可以在背景图片以及背景颜色上使用。缺点：会把设置div及其子元素都显示透明。

<div class="div1">
	<p>透明度测试</p>
</div>

.div1{
    
    
	display: inline-block;
	margin: 10px;
	width: 200px;
	height: 200px;
	color: #FFF;
	background:url(img/middle-top-bg.png) no-repeat;
	/* 填充整个容器 */
	background-size: 100% 100%;
	opacity: 0.3;
}

结果：

• 使用rgba(red, green, blue, alpha)设置透明度，优点：只透明背景颜色。缺点：不能设置背景图片。

<div class="div2">
	<p>透明度测试</p>
</div>

.div2{
    
    
	display: inline-block;
	margin: 10px;
	width: 200px;
	height: 200px;
	color: #FFF;
	background-color: rgba(150,250,27,0.2);
}

结果：

• 如果想使用背景图片，又想设置背景透明，但是内容不透明，可以当如设置一个div作为背景，然后使该div透明。优点：既可使用在背景图片又可以使用在背景颜色上。缺点：设计多个div,比较麻烦。

<div class="div3">
	<div class="bg"></div>
	<div class="container">
		<p>透明度测试</p>
	</div>
</div>

div3 {
    
    
	display: inline-block;
	margin: 10px;
	width: 200px;
	height: 200px;
	color: #FFF;
}
.bg{
    
    
	position: absolute;
	background: url(img/middle-top-bg.png) no-repeat;
	/* 填充整个容器 */
	background-size: 100% 100%;
	opacity: 0.3;
}
.container{
    
    
	position: relative;
}

结果：