如何为旧版本浏览器添加带有透明度的背景颜色回退支持？

Question

我想设置背景颜色，但我想使用alpha通道。有没有一种方法可以支持具有透明度的新浏览器，并确保旧浏览器在无法使用透明度时显示正确的颜色？

例如，以下内容是否足够，还是第二个值会取消第一个值：

background-color: rgb(255, 0, 0);       // older browsers
background-color: rgba(255, 0, 0, 0.5); // newer browsers

更新：
我不想支持旧浏览器的透明度。我只想确保旧浏览器使用正确的背景颜色，而新的浏览器（如果它们支持）则显示 alpha 通道。

- 1.21 gigawatts

Answer 1

在旧版浏览器中，使用半透明PNG文件作为背景。例如以下内容：

这样做的好处是，查看下面的代码段：

.parent {position: relative; width: 150px; height: 150px; margin: 20px; border: 1px solid #999; display: inline-block;}
.child {position: absolute; width: 50px; left: 50px; top: 50px; height: 50px; background: url("https://upload.wikimedia.org/wikipedia/commons/d/d3/Black_%2850%25_transparent%29.png") repeat;}

#one {background: #ff9;}
#two {background: #99f;}

<div class="parent" id="one">
  <div class="child"></div>
</div>

<div class="parent" id="two">
  <div class="child"></div>
</div>

- Praveen Kumar Purushothaman

---

太棒了。我不知道你可以这样做。我会研究一下，看看这是否解决了我的问题，但我不确定我只能更改CSS而不是标记。但我表述问题不正确。我不需要在旧浏览器中支持透明度。我只想确保如果我在新浏览器中使用RGBA，旧浏览器仍然会显示颜色（即使不透明）。 - 1.21 gigawatts

他们只会忽略rgba。 - Praveen Kumar Purushothaman

那么我可以设置两次背景颜色，旧的浏览器将忽略 rgba，而新的浏览器将会使用它吗？ - 1.21 gigawatts

@1.21G瓦特 老的浏览器会忽略rgba颜色。但是为了在新的浏览器中隐藏半透明PNG（或者仅仅使用纯色），通常使用条件注释或CSS浏览器hack。 - nwellnhof