Part 2 of 3 
CSS Opacity Background Blending Effects
By Michelle Goodrich -- Mandarin Design
(Updated OCTOBER 2005)
<alphavalue>
Syntactically a <number>. The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. 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 <alphavalue>.
W3C Transparency
While working with the opacity filter and images we learned that some browsers will render jagged text if the background is not defined for certain images. Logically we think that defining the background as transparent might work. It doesn't. When we tell the browser that the background is the image (which it is) then it blends with the image and the text is clean. The opacity text examples use background:url(http://www.mandarindesign.com/images/imagine.jpg)
Copy and paste this in your Blog or Web page.
It will look like this (image included).
We put the Opacity text Imagine over a black and white image. Any image will work. Any size.
Copy and paste this in your Blog or Web page.
It will look like this (image included).
We put the Opacity text Imagine over a black and white image. Any image will work. Any size.
Copy and paste this in your Blog or Web page.
It will look like this (image included).
Copy and paste this in your Blog or Web page.
It will look like this (image included).
background:whitesmokecolor: maroonbackground:whiteWhy use a white pullquote background? If our page is whitesmoke then this pullquote area will be blended with a 70% white background and 70% maroon colored text.
Opacity 70% We are using an opacity of 70%. The opacity
is applied to the entire pullquote div.
Parent/Child Opacity When we specify the opacity again, opacity that we want the child to take from the parent, we give a tag layout.
We used <strong style="float:right; filter:alpha(opacity=50);
-moz-opacity:.5; opacity:.5;"> .
We used the <strong> tag. The contents of the <strong> will take on the opacity of the parent. The code says says to use an opacity of 50%. But it is actually 50% of our original 70% in both IE and Mozilla Firefox with strong applied just to cause more confusion. Actually, it's just the first non-container tag that came to mind.
Since the opacity pullquote div is floated to the right, we
maintain the opacity by giving the <strong> tag layout. The
float:right is enough layout to help the browser
maintain the opacity of the parent container.
In this example we insert the pullquote code first. Then anything we type after the pullquote automatically aligns to the left.
The code for this pullquote includes a suggestion to the brower to apply an opacity of 70%, make the background color white, and make the text maroon. Most browsers will apply the opacity. Even if they don't the effect is still good. It's a white background with maroon text.
Margin We used margin:1px in this example. The margin can be increased or decreased.
Color We used color:maroon. The color can be changed
to any color.
Copy and paste this in your Blog or Web page.
It will look something like this.
In this example we insert the pullquote code first. Then anything we type after the pullquote automatically aligns to the left.
We can put text here or an image, but we do need something. Otherwise, the pullquote might spill. We could use the <div style="clear:both;"></div> but it's more fun to type.
Note: The colors white and maroon will blend with the background color or background image on your page. The copy-and-paste opacity pullquote code works on any color background, including black.color:black;width:100%;background:white;
filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
Copy and paste this in your Blog or Web page.
It will look something like this.
The opacity style can be applied to any tag. Notice that the background color is defined. If the background color isn't defined some browsers will display the text with a jagged edge. The opacity filter needs a color or a background image to blend with.
Some code to take out you when you leave.
CSS Style Sheet Code (or look at our live version style1.css)
Copy and paste this in your Blog or Web page.
It will look like this.
Part 2 of 3
Note: We are testing Opacity in Opera using the Windows build 8238 found at OPERA DESKTOP TEAM. As of today Opacity is working in this version of Opera with minor issues. No show stoppers.
Part 2 of 3