opacity · 跟老司机学CSS3

**opacity** * 描述：设置对象的不透明度。 * 版本：CSS3 * 继承性：无 **语法** ``` opacity：数值; ``` 数值使用浮点数设置对象的不透明度，数值可以使 0.0 - 1.0 之间，如果超过了这个范围，其计算结果将截取到与之最相近的值。 **使用说明** 对于不支持 opacity 属性的 IE 浏览器可以使用 IE 私有的滤镜属性来实现与 opacity 相同的效果。例如： `div{filter:alpha(opacity=50);}` IE8 及之前的版本可用对象若设置了值小于 1 的 opacity，将会产生局部层叠上下文。 **代码示例** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>opacity</title> <style> #container{ width: 50px; height: 50px; background: #000000; color: red; font-size: 20px; opacity: .5; } </style> </head> <body> <div id="container"> ok </div> </body> </html> ``` 可以看到，字体颜色也不像红色，背景颜色也不像黑色。 ![opacity](https://box.kancloud.cn/24bca3d434faf7f4b1141f6b0fa0fde7_61x64.png)