html - 使用 rgba css 属性开发主题布局，不适用于 IE

Question

我在为站点创建 CSS 驱动的主题布局时遇到问题。要求是用户将为他的自定义主题选择主要颜色和次要颜色。页面中的这些 block 将使用一些不透明度(或 alpha 值)呈现，在该不透明度之上将呈现渐变图像。使用不透明度 css 属性的问题是所有子元素也继承了不透明度值，这不是我们想要的。另一方面，使用 rgba 属性与 IE 存在兼容性问题。我应该采用哪种方法？

/* HTML */
  <div class="someClass">
       Page Title
 </div>

/* CSS */ 
.someClass{

  border-top:10px solid #b59a47;
  border-bottom:5px solid #f4e196;
  background-image: url(../../images/contentHeader-bg.png);
  background-color: rgba(244,225,150,0.2);
}

Answer 1

并非所有浏览器都支持 RGBa，因此如果设计允许，您应该声明一个“后备”颜色。这种颜色很可能是纯色(完全不透明)。不声明回退意味着在不支持它的浏览器中不会应用任何颜色。这种回退在一些非常旧的浏览器中确实会失败。

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}

请注意 this bug不过，与在 IE 6 和 7 中不使用速记有关。