opacity

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费赠送额度!

CSS 中,opacity 属性指定元素的透明度

基本用法

div {
  opacity: 0.5;
}

不透明度的默认初始值为 1(100% 不透明)。 不透明度不会继承,但由于父级具有不透明度,因此会应用于其中的所有内容。 您无法使子元素比父元素更不透明,除非使用一些 技巧。 值是 0 到 1 之间的数字,表示通道(“alpha”通道)的不透明度。 当元素的值为 0 时,元素完全不可见;值为 1 表示完全不透明(实心)。

Check out this Pen!

IE 兼容性

如果您希望 不透明度在所有版本的 IE 中都能正常工作,则顺序应如下所示

.opaque {
  /* Theoretically for IE 8 & 9 (more valid) */
  /* ...but not required as filter works too */
  /* should come BEFORE filter */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8

  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=50); // IE 5-7
  
  /* Modern Browsers */
  opacity: 0.5;
}

如果您不使用此顺序,IE8-as-IE7 不会应用不透明度,尽管 IE8 和纯 IE7 会应用不透明度。

关于堆叠上下文的说明

如果具有不透明度且值小于 1 的元素被定位,则 z-index 属性将按 CSS2.1 中所述应用,但 auto 值将被视为 0,因为始终会创建一个新的堆叠上下文。

不透明度可以用作 visibility 属性的替代方案:visibility: hidden;opacity: 0; 相同。

相关属性

其他资源

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
24+ 5.1+ 19+ 12.1+ 9+ 2.1+ 3.2+