CSS Transparent Background

Today’s blog post will show you how to make a background layer half transparent, but keep the text on top as a solid color. A common problem occurs in browsers if you set a background opacity to transparent, all of the children will also become transparent. One solution in the older days was to use a png image, but we can also implement a pure CSS solution thanks to RBGa colors.

Using RGBa colors, we can set the alpha background along with an opacity value, and it will only affect the element it is applied to, not it’s children ! Sounds perfect, let’s take a look at how to implement it:

/* default fallback */
background: rgb(255, 255, 255) transparent;
/* nice browsers */
background: rgba(255, 255, 255, 0.8);

The example above will show a semi-transparent white background, and all child elements as having a solid opacity. You can see we use rgb(255, 255, 255) as the default for any browsers that might have problems using RGBa. We then use rgba(255, 255, 255, 0.8) for most modern browsers, which sets the background color to white, and a transparency level of 80%. This works fine in Chrome, Safari and FireFox 3+ etc, however our dear friend IE fails in all versions.

For IE6+, we must used Microsofts implementation of their gradient and filter properties. By using gradients combined with an 8 color HEX value, we can achieve the same semi-transparent white background as other browsers.

/* IE 6/7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)"; 

You can see the values of the start and end colors are “#CCFFFFFF”. The last 6 characters refer to the white background color, and the first 2 characters are the alpha hex value which control the opacity level. So if we want to set an opacity of 80%, we would normal use 0.8 as our value, however for alpha hex value we need to do some calculations. You can use this tool I wrote below to quickly calculate it for you. Simply enter your normal opacity value like 0.8 amd hit convert, which will give us the “cc” alpha hex value we need (“cc” in our case).

So our cross browser solution now looks like this:

/* default fallback */
background: rgb(255, 255, 255) transparent;
/* nice browsers */
background: rgba(255, 255, 255, 0.8);
/* IE 6/7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
/* IE8 */    
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";

This should work in all browsers from IE6+, Chrome, FF 3+ etc. Here is an example of a semi-transparent gray div on top of a red background:

Hello World

Comments

  1. I’m using same solution for long time, But there is a small problem in this solution is that. If you have text below your transparent element. It’s selectable in IE.

    Solution for that is to add a transparent gif as background-image for IE8 and below browser.

    Reply
    • @Tarun

      Generally speaking, you should want your text to be selectable.
      Otherwise, you can set the z-index to get your desired effect.

      Reply
  2. Can we use a background image and set that to be transparent?? Such that any text over it will be solid and other css style attributes will retain their properties? Setting rgba(255….) will override any background image!!

    Reply
  3. thankyou very, so if we want make it transparet just plus a opacity score, right ?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


three × 9 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>