Home / Articles / Programming languages / Markup languages / HTML & CSS / CSS3: semi-transparent background color using RGBA

CSS3: semi-transparent background color using RGBA

CSS3: semi-transparent background color using RGBA
 
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


One day may need to make a semi-transparent background color for a specific block. But how to do this correctly using recent features in CSS3?

Task

Create a cross browser semi-transparent background color. 

Solution

The first thought that crossed your mind with this kind of task is to use as background PNG image with already set semi-transparency. But in reality this line of thinking is completely unnecessary. You can perfectly manage with the task without using the image (hence without pointless request to the server). So, let's try to find the optimal solution.

Second idea you probably had is to use CSS property opacity. But it's not probably the best idea because if you choose this option what you'll get is not just semi-transparent background but also semi-transparent text. Ok, let's be completely honest, the whole window will be messed up.

Of course, you can try to add additional container and apply opacity only to this container, but this HTML-element will be welcomed only by a designer and not a real programmer that likes order and neatness. Is there a way to go around this superfluous container?

Of course there is - use RGBA.

Description format for RGBA color

CSS3 allows you to specify color using RGB and RGBA. At the same time, we must specify the degree of each color component. Each color component is expressed by one byte (from 0 to 255 f.y.i).

The syntax for this neat trick is very simple:

background: rgb(255, 0, 0); /* pure red color */

For RGBA let's add fourth component - alpha, which sets the degree of transparency (from 0 to 1).

background: rgba(255, 0, 0, 0.4); /* pure red color with semi-transparency 40% */

So here is your solution for the tasks. Setting the background color using RGBA will suffice; and everything will look the way you want it. Without unnecessary images or elements!

Where can I get these funny numbers for a particular color?

You can get all the color components (funny numbers) using the tool "Eyedropper" in Photoshop or any other graphics editor programs.

Cross browser

Since RGB is much older than RGBA and was present since the era of CSS2, as a safety precaution from older browsers you can use a duplicate construction:

.nice-box {
  background: rgb(255, 0, 0);
  background: rgba(255, 0, 0, 0.4);
}

This approach will insure that for our ancient browsers the color will still be valid. Of course, with these browsers forget about this kind of semi-transparency trick (RGBA).

IE is a separate story to be taken care of. To make it understand RGBA colors it is sufficient to apply the plugin PIE.


 

Read also

CSS3: multiple backgrounds

CSS3: multiple backgrounds

CSS: working with color

CSS: working with color

Post comment

Quick navigation

basicuse.net
106160485398655174790
html5_css

General navigation