CSS3: rgba color values!

January 14th 2010

RGBA actually stands for (R)ed (G)reen (B)lue (A)lpha and is used to define colors in your CSS. As you must already know, colors are composed of various amounts of red, green and blue to form the final color. In CSS you can now specify the opacity of the desired color, that’s what the alpha channel is for.

What does that mean?

Up until now, the only way we had to add opacity to an element was to use the opacity CSS property. While it’s working totally fine, the opacity is also applied to all the children of that element, so this solution is not really appropriate if you just want a transparent background on a container.

Take a look at the following demo page to see how RGBA and opacity reacts differently.

Another way would be to use transparent PNGs and use them as background images to achieve the desired effect, but then again it’s not the clean way of doing this and PNG support in IE6 is far from being good.

Now you can simply add opacity to the color of your background by defining the background color like so:

#container {
  background: rgba(255,0,0,0.2);
}

The values are the following:

  1. Red color value
  2. Green color value
  3. Blue color value
  4. Alpha value, from 0 (transparent) to 1 (opaque).

Real world usage

As always with CSS3, you need to be careful on how you use it. If opacity on an element is not a major aspect of your design but a nice to have, you can consider RGBA. If your design rely on opacity to look nice, then you’ll have to look at other solutions.

What about degradation?

As you might expect, RGBA is not supported in any current version of Internet Explorer but it’s working as intended in the lastests versions of Chrome, Firefox, Safari, Opera, etc. To ensure at least everyone is able to see a solid background color, you must declare the properties as follow:

#container {
 background: rgb(255,0,0); /* For IE and older browsers */
 background: rgba(255,0,0,0.2);
 }

So when a browser sees the first value, it’ll apply it to the element, if it supports RGBA, it’ll override the first declaration with the second one. This way you’re sure everyone will at least see a solid background.

10 Responses to “CSS3: rgba color values!”


  1. google.co.uk says:

    Awesome! Its truly remarkable post, I have
    got much clear idea regarding from this paragraph. https://www.google.co.uk/?gfe_rd=cr&ei=PclWWPKPKuvR8gefqYzgAg&gws_rd=ssl

  2. imuaban.org says:

    Also, like I’ve mentioned in this article AdSense earnings relies upon upon the category of your web site and source of site visitors.

  3. acetian.com says:

    They pull the bes watches to the company’s customers.
    German watchibg companies generation really unique dive timepieces.

    Cartier Price tag waqtches happen to be popular. http://acetian.com/groups/mechanical-views-currently-the-magic-together-with-mystique/

  4. Roxanne says:

    Com esse tempo todo de pesquisas, eu adquirir inúmeras experiências, a cada dia tenho mais conhecimento de como trabalhar e ganhar dinheiro honestamente pela
    internet.

  5. curso forex says:

    Tenha um claro fazendário – possuimos muitos exemplos tais quais: viagens, confirmar uma aposentação, cursos –
    e a abalar lhe desenvolva qualquer estratégia com investimento, lembrando-se toda vez compaixão respectivo delineamento
    desde investidor. http://inb123.s17.xrea.com/sky/sky.cgi

  6. Já se encontra disponível último exemplar da publicação Terapia Sexual
    2012, para análise gratuíta na rede. http://Forestdancer58.Full-Design.com/-Em-Pratos-Limpos-3784576

  7. Ervin says:

    I studying %BT%. Along with I`ve already been planning on taking our Instagram homepage facts about this item, you recognize, in the form of blog.
    Are you able to help me to?

  8. toplist ekle says:

    I savour, result in I found just what I was looking for.
    You have ended my 4 day long hunt! God Bless you man. Have a great day.

    Bye

  9. So if you acquired stuck, are just starting or you’re just looking for to enhance your computer
    game, look into our Island Experiment cheats and also ideas below in addition to have a good time!

Leave a Reply