多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# CSS3 opacity 属性 ## 实例 设置 div 元素的不透明级别: ``` div { opacity:0.5; } ``` 您可以在本页底部找到更多实例。 ## 浏览器支持 所有浏览器都支持 opacity 属性。 注释:IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。 ## 定义和用法 opacity 属性设置元素的不透明级别。 | 默认值: | 1 | | --- | --- | | 继承性: | no | | --- | --- | | 版本: | CSS3 | | --- | --- | | JavaScript 语法: | _object_.style.opacity=0.5 | | --- | --- | ## 语法 ``` opacity: _value_|inherit; ``` | 值 | 描述 | 测试 | | --- | --- | --- | | _value_ | 规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。 | [测试](/tiy/c.asp?f=css_opacity) | | inherit | 应该从父元素继承 opacity 属性的值。 | ## 亲自试一试 - 实例 [改变元素的不透明度](/tiy/t.asp?f=css3_opacity_js) 本例演示如何使用 JavaScript 来改变元素的不透明度。 ``` <!DOCTYPE html> <html> <head> <script> function ChangeOpacity(x) { // 返回被选选项的文本 var opacity=x.options[x.selectedIndex].text; var el=document.getElementById("p1"); if (el.style.opacity!==undefined) {el.style.opacity=opacity;} else {alert("Your browser doesn't support this example!");} } </script> </head> <body> <p id="p1">请从下面的例子中选择一个值,以改变此元素的不透明度。</p> <select onchange="ChangeOpacity(this);" size="5"> <option />0 <option />0.2 <option />0.5 <option />0.8 <option selected="selected" />1 </select> </body> </html> ``` ## 相关页面 CSS 教程:[CSS 图像透明度](/css/css_image_transparency.asp "CSS 图像透明度")