---

定义透明的图片

opacity属性可定义元素的透明度，该属性的取值范围是0.0~1.0；取值越低，透明度越低；越高则透明度越高；当为0.0的时候，等于完全透明看不见；当为1.0时，完全不透明，跟没设置了该属性一样。

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* 兼容IE8以及更老的版本 */
}

运行一下

为了兼容IE8以及更低版本的IE浏览器，可以使用filter:alpha(opacity=x)来设置透明度，x的取值范围是0~100，取值越低则越发透明。

---

透明的div元素 - 使用opacity属性

opacity属性不仅适用于img元素，也适合于div等绝大部分元素。如下所示，适用opacity定义透明的div元素。

div {
    opacity: 0.3;
    filter: alpha(opacity=30); /* 兼容IE8以及更老的版本 */
}

运行一下

透明背景的div元素 - 使用rgba来定义背景色

使用opacity属性设置div元素的透明度，会使整个元素变成完全透明；如果仅仅是想把div元素的背景变成透明的，那就可以使用rgba来设置透明的背景色。

div {
    background: rgba(212, 216, 84, 0.3); 
}

运行一下