Show your wizard skills by learning to use the RGBa color specification in CSS3.
I’ll show you how to create a partially transparent background behind a paragraph using RGBa. The result will look like this:
You get control over the alpha channel with RGBa. The RGB represents red, green, blue. The A represents alpha transparency, or degree of opacity. In this color specification, there is no hexadecimal notation, the only allowed values are integers (0-255) or percentages (0%-100%). Here’s an example.
p {color: rgba(0,0,255,0.5)}
The rule creates a paragraph that is a semi-transparent solid blue. The four integers in the declaration mean there is 0 red, 0 green, 255 (or 100%) blue, with an alpha transparency value of 0.5. The values for the A can range from 0.0 which is completely transparent, to 1, which is complete opaque.
em {color: rgba(255,0,0,0.25)}
p {color: rgba(100%,50%,0%,0.8)}
The first rule creates an emphasized element that is solid red and very transparent with the value 0.25. The second rule styles a paragraph with percentage values. It would display as a slightly transparent orange.
Here’s how I created the strawberry example you see above. The HTML is
<div id="ex">
<p>Strawberries </p>
</div>
The CSS is
#ex {
width: 542px;
height: 80px;
background: url(img/strawberry-bg.jpg) no-repeat;
border: 2px solid #999;
}
p {text-align:center;
font-size: 2em;
background-color: rgba(255,0,0,.5);}
You can use RGBa in CSS anywhere you use color: a background, a border, a heading, etc. To control what is shown in IE8 and older, give a normal RGB declaration, followed by and RGBa declaration. Non-compliant browsers will simply ignore the rule they don’t support. Compliant browsers will use the last rule in the cascade. If you quit worrying about IE8 and older long ago, just use the rgba rule – all modern browsers support it.
color: rgb(255, 255, 255,);
color: rgba(255, 255, 255, 0.5);
With pseudo elements like a:hover, the degree of opacity can be used to create beautiful and informative effects.
Note: Updated October 5, 2014 with current information.
