css alpha无效果

CSS中有一个非常常用的属性alpha，可以修改元素的不透明度。但是，有时候我们可能会发现alpha属性无效，这是为什么呢？

.opacity {
    opacity: 0.5; /* 设置半透明，alpha属性 */
    background-color: black; /* 背景颜色为黑色 */
    color: white; /* 字体颜色为白色 */
}

以上代码，我们给一个元素加上了alpha属性，预期结果应该是这个元素变成了半透明的黑色。但是事实上，页面中展示出来的这个元素并没有变半透明，反而成了全透明的黑色。

这是为什么呢？原来，alpha属性并不是CSS3新添加的属性，早在CSS2.1规范中就已经有了。但是，IE浏览器（6/7/8）并不支持alpha属性，它使用的是另外一种属性——filter。

/* IE浏览器 */
.filter-opacity {
    filter: alpha(opacity=50) /* 修改元素的不透明度 */
}

由于IE浏览器不支持alpha属性，如果要兼容IE浏览器，则需要写两套css代码。所以，如果我们只写了alpha属性，而页面中却没有生效，就有可能是因为我们的目标浏览器不兼容alpha属性。这时候，我们需要再加上一套filter属性，兼容IE浏览器。

综上，当我们使用alpha属性发现无效时，需要注意是否需要添加兼容IE浏览器的filter属性。