CSS3 Examples

CSS3 Color, Transparency, and Opacity

Written by jon on 11:15 AM

If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is .

We created two color charts in HTML and then added the black and white image imagine.jpg as the background in both tables. Each cell has a background color defined. We can't see the background image in the first table because the background table image is behind the fully opaque cell color.

The CSS we use for opacity looks like this.

Mozilla Opacity

The -moz-opacity:.40 proprietary code may not be needed. We used it in earlier versions of Mozilla and left it in for possible backward compatibility issues. Opacity works fine in our Mozilla Firefox browser without the proprietary code.

Opacity Applied to Table Row and Cells

When we make a table row or cell 40% opaque we can see through the color to reveal the image underneath. Add the style filter:alpha(opacity=40); opacity:.40; to adjust the opacity on a table, row, or cell.

000000	330000	660000	990000	CC0000	FF0000
003300	333300	663300	993300	CC3300	FF3300
006600	336600	666600	996600	CC6600	FF6600
009900	339900	669900	999900	CC9900	FF9900
00CC00	33CC00	66CC00	99CC00	CCCC00	FFCC00

This is a live table and is dependent on the browser. From here IE doesn't apply opacity to the row but does apply opacity to the four cells. In contrast, Firefox applies opacity to the four cells and the row. We are not using the -moz-opacity:.40; proprietary code for Mozilla because we think it is no longer needed.

Opacity Applied to Table Cells

This is a table. The background image is fully opaque.

Lay Color Over an Image with Opacity

We can use the CSS opacity property to apply color to an image, text, or an entire page. Add a blue background and the black and white image is instantly rendered in blue.

Table Opacity

The background image is defined in the table element. The opacity is applied only to the TD in our style sheet. So, when we make the cell blue it will automatically take on the 40% opacity so that we can see the image through the background color.

The code to type in your page looks like this.

It will look like this.

The cellpadding="0" and cellspacing="0" was changed to cellpadding="1" and cellspacing="0" so that the opacity works in Mozilla Firefox. This is not a deficiency in Mozilla, just an example that stopped working when the cellpadding and cellspacing were both set to "0".

DIV Opacity

We can achieve the color overlay effect using a div. This example uses CSS inline style so a direct copy and paste without adding anything to the style sheet will work. We are using two DIVs here. The first div contains a background defined as 300 x 200 pixels. The first div alone looks like this.

The second div is contained in the first div (a nested div). In this example the second div contains the opacity effect.

The result looks like this (in your browser).

Copy and paste this in your Blog or Web page.

It will look like this.

You can try other colors and levels of opacity.

Red

Blue

Green

Lay Image Over Color With Opacity

We are doing the opposite here, laying the image over the color rather than the color over the image. The original image is black and white. The width and height are required for opacity to work. We used family.gif with width:250px;height:236px.

The first div contains and displays the background color named red. We applied 90% opacity to the background color. It's adjustable.

The second div contains and displays the black and white image. We used 70% opacity on the image.

Copy and paste this in your Blog or Web page.

It will look like this.

Flip-flop for Opera

We flip flopped the code to put the image with opacity appplied on top of the color instead of the color on top of the image. Why? It will at least render an image in Opera. Laying the color over the image without the opacity working in Opera results in a big colored square.

Opera is the only known browser that doesn't support the opacity property as of today, but putting the image on top of the background will allow Opera browsers to see the image.

Opera browsers will not see the opacity effect. It will look like this in Opera.

All other known browsers support the opacity property even though it is CSS3 and not required yet.