CSS opacity 属性 |
您所在的位置：网站首页 › html设置透明度动画 › CSS opacity 属性 |
CSS opacity 属性
|
CSS opacity 属性
❮ 上一节
CSS 参考手册
下一节 ❯
实例
设置 div 元素的不透明级别： div { opacity: 0.5; } 亲自试一试 »下面有更多实例。 定义和用法opacity 属性设置元素的不透明级别。 opacity-level 描述透明度级别，其中 1 完全不透明，0.5 为 50% 透明，0 为完全透明。 
opacity 0.2
opacity 0.5
opacity 1(default) 注释: 使用 opacity 不透明度属性向元素的背景添加透明度时，其所有子元素也将变为透明。 这会使完全透明元素中的文本难以读取。如果不希望对子元素应用不透明度，请改用RGBA颜色值（请参见下面的"更多实例"）。 默认值: 1 继承性: no 支持动画: yes, 请参阅单独的属性. 阅读有关动画的信息 测试一下 版本: CSS3 JavaScript 语法: object.style.opacity="0.5" 测试一下 浏览器支持表中的数字表示支持该属性的第一个浏览器版本。 属性 opacity 4.0 9.0 2.0 3.1 9.0注释: IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。 语法 opacity: number|initial|inherit; 属性值 值 描述 试一试 number 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 亲自试一试 » initial 将此属性设置为其默认值。请参阅 initial 亲自试一试 » inherit 从其父元素继承此属性。请参阅 inherit 更多实例 实例opacity 属性为元素的背景以及所有子元素添加透明度。这使得透明元素中的文本难以读取： div.first { opacity: 0.1;}div.second { opacity: 0.3;} div.third { opacity: 0.6; } 亲自试一试 » 实例要不将不透明度应用于子元素（如上面的示例中），请改用 RGBA 颜色值。以下示例设置背景色的不透明度，但不设置文本的不透明度： div.first { background: rgba(76, 175, 80, 0.1);}div.second { background: rgba(76, 175, 80, 0.3); } div.third { background: rgba(76, 175, 80, 0.6);} 亲自试一试 »提示: 了解有关 CSS RGBA 颜色。 实例如何使用 JavaScript 更改元素的不透明度： function myFunction(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!"); } } 亲自试一试 » 相关页面CSS 教程: CSS 不透明度/透明度 CSS 教程: CSS RGBA 颜色 HTML DOM 参考手册: opacity 属性 ❮ 上一节 CSS 参考手册 下一节 ❯ |
【本文地址】
今日新闻 |
推荐新闻 |