create a transparent background

RGBA color

My preferred approach is using rgba color. That’s Red-Green-Blue-Alpha. The alpha channel defines transparency. For example

.wrapper-content {
background-color: rgba( 255, 255, 255, 0.5);
}

In the above example, we declare a white background at one-half transparency. The disadvantage to this approach is that IE6-8 won’t recognize it, so you need to declare a background color for IE that isn’t transparent.

.wrapper-content {
background-color: #FFFFFF;
background-color: rgba( 255, 255, 255, 0.5);
}

IE will display a white background because it does not recognize rgba() as a color definition, so it ignores this declaration. Modern browsers will use the rgba() color definition.

If you’re ok with a lower-fidelity experience in IE, also known as progressive enhancement, then this is the method for you. You can use rgba() and rgb() without an alpha channel anywhere you currently declare colors in hex values e.g. #FFFFFF.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s