CSS3 - 透明样式（背景色透明，图片透明，整个容器透明）

2015-10-24 发布：hangge 阅读：4006

生成部分透明的图片和颜色是CSS3的一个基本功能。实现透明效果的方式有两种：

1，使用 rgba() 函数

最后一个参数表示透明度，这个只是使背景色透明。

（由于不是所有浏览器都支持rgba()函数，所以前面我们先声明一个实心的后备颜色）

<style>
	.box1 {
		background: rgb(170,240,0);
		background: rgba(170,240,0,0.5);
	}
</style>

<div class="box1" style="width:200px;height:100px">
	www.hangge.com
</div>

2，使用 opacity 属性
（1）使用opacity，不仅元素背景颜色，就连文本颜色，边框颜色也会变透明
（2）opacity可以实现图片的半透明效果
（3）渐变动画效果（如：淡入淡出）也是使用opacity属性

<style>
	.box2 {
		background: rgb(170,240,0);
		opacity: 0.5;
	}
</style>

<div class="box2" style="width:200px;height:100px">
	www.hangge.com
	<img src="logo.png"/>
</div>