Question

I am facing a problem while creating a css driven themed layout for a site. The requirement is that a user will select a primary and secondary color for his customized theme. The are blocks in the page which are to be rendered with some opacity (or alpha value) above which a gradient image will be rendered. The problem with using opacity css property is that all child elements also inherit the opacity value which isn’t what we want. On the other hand, using the rgba property has compatibility issues with IE. Which approach should I take ?

/* 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

Not all browsers support RGBa, so if the design permits, you should declare a “fallback” color. This color will be most likely be solid (fully opaque). Not declaring a fallback means no color will be applied in browsers that don’t support it. This fallback does fail in some really old browsers.

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

Do be aware of this bug though, related to not using shorthand in IE 6 and 7.