详解css透明度之rgba和opacity的区别及兼容

下面就来详细讲解一下关于CSS透明度的两种常见方式： opacity 和 rgba。

一、opacity 和 rgba 的区别

1. opacity

opacity 是 CSS3 中的一个属性，用来设置元素的不透明度，取值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。

div {
  opacity: 0.5;
}

使用 opacity 可以实现元素的整体不透明度设置，但是需要注意的是，opacity 作用于元素本身以及它的所有子元素，这会导致子元素的不透明度也受到影响。另外，opacity 不仅影响元素的透明度，还会影响元素的内容的透明度。

2. rgba

rgba 是一种颜色表示方式，其中的 a 表示透明度，取值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。

div {
  background-color: rgba(255, 255, 255, 0.5);
}

使用 rgba 只对元素的背景色进行透明度设置，而不会影响元素的内容的透明度，也不会影响元素的子元素。

二、兼容性问题

1. opacity 的兼容性

opacity 属性是 CSS3 中的属性，不兼容 IE8 及以下版本的浏览器。在 IE9 及以上版本的浏览器中，可以通过设置 filter 属性来实现透明度的设置。

div {
  opacity: 0.5;
  filter: alpha(opacity=50); /* 兼容IE9及以上版本的浏览器 */
}

2. rgba 的兼容性

rgba 是 CSS3 中的属性，不兼容 IE8 及以下版本的浏览器。在 IE9 及以上版本的浏览器中，可以通过设置 background 属性来实现背景色透明度的设置。

div {
  background: rgba(255, 255, 255, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF); /* 兼容IE9及以上版本的浏览器 */
}

三、示例说明

示例一：使用 opacity 设置整个元素的透明度

<div class="box">
  <p>这是一段文字。</p>
</div>

.box {
  opacity: 0.5;
}

上述代码可以实现整个 .box 元素的不透明度设置为 50%，因此 .box 元素以及它的所有子元素的透明度都会受到影响。

示例二：使用 rgba 设置元素的背景色透明度

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.5);
}

上述代码可以实现 .box 元素的背景色透明度设置为 50%，而不会影响到 .box 元素的子元素。

总之，根据具体的需求可以选择合适的属性来进行透明度的设置。 opacity 适用于需要对元素和它的子元素进行整体不透明度设置的场景，而 rgba 适用于需要对元素的背景色进行透明度设置的场景。在使用过程中需要注意兼容性问题。