CSS opacity 属性用于指定一个元素的透明度。换句话来说，opacity属性用于控制元素背后的背景的可见程度。
opacity属性使用值来作为元素透明度的级别。数值的范围在0-1之间。透明度值为1是元素默认的透明度级别，它表示元素完全不透明。透明度为0表示元素完全透明。
当一个元素的透明度数值越接近0时，它后面的背景就看得越清楚。
当opacity属性应用在某个元素上时，是把这个元素(包括它的内容)当成一个整体来看待，即使透明度的值没有被该元素的子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。
使用opacity属性，当属性值不为1时，会把元素放置在一个新的堆叠上下文中。
opacity属性和visibility属性具有相同的效果，它们都会使元素变得完全透明，而不会影响页面的布局，透明元素仍然会占据它原来所在的位置。
使用opacity属性可以制作元素的淡入淡出动画效果。opacity属性是极少数能够被GPU管理的CSS属性之一，因此使用opacity属性制作的动画速度可以更快。
官方语法
opacity:
参数：
：使用值来指定透明度的级别。值在0-1之间。1表示元素完全不透明。0表示元素完全透明。0.5表示元素半透明。
opacity属性的初始值为1。
应用范围
opacity属性可以应用所有元素上。
示例代码
/* 完全不透明 */
opacity: 1;
opacity: 1.0;
/* 半透明 */
opacity: 0.5;
/* 完全透明 */
opacity: 0.0;
opacity: 0;
opacity: inherit;
由于IE8以下的IE浏览器不支持opacity属性，因此要制作跨浏览器的透明度设置可以使用下面的代码：
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
在线演示
下面的例子演示了一张图片的透明度为0.5，即半透明的图片。在鼠标滑过这张图片时，图片变为完全不透明。
img{
opacity: 0.5;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
img:hover{
opacity: 1;
}
浏览器支持
opacity属性的浏览器兼容性列表如下：
Internet Explorer9之前的IE浏览器不支持opacity属性，但是支持非标准的filter属性。IE 5-7支持filter: alpha(opacity=xx)。IE8-9支持扩展的progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)。扩展格式对于IE8-9更有效，但是也可以使用filter: alpha(opacity=xx)。在IE8中引入了-ms-filter，它的意义和filter相同。
IE9之后的IE浏览器不再需要使用filter过滤器来制作透明度。
相关阅读
