Translucency Demo

The blue heading and image displayed below these radio buttons is overlayed over the top of the text on the page. By decreasing the opacity of the image's containing element, the text below can show through the image. You can use the radio buttons to experiment with different levels of opacity.

Note: This illustration only works in recent versions of Internet Explorer (Windows) and Gecko based browsers like Netscape v6+, Mozilla, and Firefox (formerly named Firebird).

The CSS for Translucency

#translucent {
   position: absolute;
   left: 80px;
   top: 30px;
   text-align: center;
   border: 1px solid #666;
   background-color: #f0f0ff;
   /* the filter attribute is recognized in
   Internet Explorer and should be a percentage */
   filter: Alpha(opacity=50);
   /* the -moz-opacity attribute is recognized by 
   Gecko browsers and should be a decimal */
   -moz-opacity: .5;
   /* opacity is the proposed CSS3 method, supported
   in recent Gecko browsers */
   opacity: .5;
}

Set Opacity

| | | |
| | | | |

Dummy Filler Text Follows

This is translucent!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a turpis sed lorem convallis iaculis. Nulla eros. Praesent accumsan. Nam metus arcu, eleifend ut, pellentesque quis, pretium vel, justo. Cras porta rhoncus odio. Praesent nec leo. Nunc vel orci non purus accumsan varius. Nam tellus. Praesent lacinia felis quis diam placerat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed fermentum pede eget lorem. In quis felis eu mi vulputate vestibulum. Fusce in eros. Nunc accumsan cursus odio.

Aenean convallis lacus eu turpis. Quisque convallis leo mollis orci. Sed a magna ac odio placerat rhoncus. Pellentesque wisi nunc, mattis in, vehicula vel, condimentum ut, libero. Fusce gravida, est vel ultrices ultrices, metus libero ornare nulla, in scelerisque quam libero id pede. Sed at mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis non ipsum et mauris consectetuer tristique. Suspendisse vestibulum purus vel erat. Curabitur pharetra adipiscing dui. Integer tempus gravida arcu. Donec congue velit ut leo. Sed et turpis. Pellentesque nisl augue, tristique accumsan, sodales id, viverra nec, libero.

Curabitur purus ligula, volutpat nec, posuere vitae, cursus in, ipsum. Nam lacus risus, interdum at, vestibulum pharetra, gravida vel, pede. Aliquam quis turpis. Nullam dolor dolor, molestie ut, vestibulum eu, porta nec, elit. Nullam nonummy tellus et ipsum. Donec adipiscing nunc eget mauris. Nulla nibh sapien, ornare sed, suscipit vitae, ullamcorper vel, mi. Cras sed dui eu ipsum ultricies mollis. Pellentesque sit amet risus nec sem blandit pellentesque. Nullam posuere ante eu quam. Sed eu pede.