Transparent Captions with Opaque Text
The object of this CSS tutorial is to create a semi-transparent or translucent background in a caption box positioned over an image or other element. It's an attractive website design technique that is simple in concept, but has been difficult to achieve before CSS 3 when the only choice was a background PNG image or the opacity property. One of the main obstacles has long been the way in which browsers actually draw elements when you alter the opacity with CSS. This tutorial shows how you can make a transparent caption with fully opaque text for your images in static webpage elements as well as in dynamic displays such as slideshows.
Caption with Opacity Bleed
Opacity With Z-Index Layers Problem
If you set the opacity of any element to less than 1 to get some degree of transparency, any element that overlays it using the z-index setting is drawn with that same opacity setting. In this situation, that means that any text that you position over your caption's nicely translucent background is drawn with that same opacity so instead of being bright and clear, it's often muddy and visually disappointing - as seen in the example here. We start with a containing div to give our image a positioned parent element. The image is contained in a div set to position:absolute with a z-index setting of 10. A div to hold the caption is also set to position:absolute and bottom:0, with an appropriate height setting and the background color set to a sort of maroon using rgb(100, 0, 0). The div is also set to opacity:.6 to allow the underlying image to shine through. However, as you can see, the text is also drawn with the same opacity and looks terrible.
Opaque Text Caption
The key to avoiding the opacity bleed issue is use the CSS3 color scheme rgba() to set the background color, because rgba() includes an alpha channel parameter to add a transparency/opacity setting to the specified color (which is expressed as a red/green/blue triplet that consists of three numbers or percentages). For the rgba scheme, a forth parameter is added that sets the opacity of the element. Just like the CSS opacity property, the alpha channel setting accepts values from 0 (completely transparent) to 1 (completely opaque). As you can see in the examples on the left, the colored background allows the underlying image to show through, but the caption text is rendered at full opacity which makes it bright and clear and easy to read. The CSS I used is as follows:
.rdCaptionBox { margin:0 auto; padding:0; position:relative; top:0; left:0;
z-index:10; width:384px; height:256px; }
.rdCaption { position:absolute; bottom:0; left:0; padding:4px; width:376px; height:26px;
background-color:rgba(100, 0, 0, .6); z-index:11; }
.rdCaptionText { margin:0; padding:0; z-index:11; text-align:center; opacity:1;
font-family:Georgia,serif; font-style:italic; font-size:1.6em;
font-weight:bold; color:white; }
It starts with a wrapper DIV, class "rdCaptionBox", which provides a foundation and the font settings. Next comes the IMG tag, followed by another DIV, class "rdCaption" which has position:absolute and a z-index to position it over the image and the critical background-color setting that uses RGBa to provide transparency. All of the required CSS is actually in the source for this page, so you can find it easily.
Unfortunately, Internet Explorer only started to support rgba colors with version 9.0 which, as of this writing, is only used by a modest (albeit, growing) percentage of current Internet Explorer users. So it can be a good idea to add an 'opacity' setting to the element using an !--[if lt IE 9] conditional comment tag to hold this CSS setting for older versions of Internet Explorer to allow for some transparency without affecting the display in other browsers.
Again, the actual CSS and HTML used to create this effect is very simple. You create a containing wrapper DIV with its position property set to relative with the top and left properties set as desired (usually 0) and a base z-index setting. Inside that DIV you insert the element you want for the base display (presumably just an image), as well as a class "rdCaption" DIV to hold the caption text. The rdCaption DIV has it's position set to absolute, again with the desired coordiate settings as well as a z-index set higher than the base setting used for the parent containing DIV. The crucial setting, however, is the background-color which is set using the RGBa() color scheme.
Text-Shadow Outlined Caption
This example more clearly demonstrates the translucent background with opaque text. You'll also note the shadow effect on the text. The shadow helps add some depth and solidity to the text.
Gradient Background Caption
CSS Level 3 also brings the capability of using gradients for background images. Here I've just replaced the evenly translucent background with one that gradually fades to full transparency. It's a bit complicated to provide backward compatibility with older versions of Internet Explorer for this effect, thanks to Microsoft's unique graphics filters that are required to produce gradients, and you may have trouble getting opaque text. You just need to remember the "cascading" part of Cascading Style Sheets. See my demonstration of Gradients and Transitions for more examples of some new CSS 3 properties to improve your website design.
This effect is often accomplished by using a PNG background image, with a gradient alpha channel setting. Since Internet Explorer has supported PNG since version 7, such a background graphic does make compatibility automatic. But I have trouble using most graphics programs for such things, so I wrote a transparent background creator in PHP that makes it easy. Try it.
.rdCaptionGrad { position:absolute; top:0px; left:0; padding:4px;
width:376px; height:32px; color:white; z-index:11;
background-image:-ms-linear-gradient(to bottom, rgba(100, 0, 0, 1) 10%, rgba(100, 0, 0, .8) 40%,
rgba(100, 0, 0, .5) 70%, rgba(100, 0, 0, 0) 96%);
background-image:linear-gradient(to bottom, rgba(100, 0, 0, 1) 10%, rgba(100, 0, 0, .8) 40%,
rgba(100, 0, 0, .5) 70%, rgba(100, 0, 0, 0) 96%);
}
This page was last modified on October 01, 2020
