When I receive the final PSDs from a designer I invariably want to reach through my computer and slap him for making my life difficult. With very few exceptions, there will almost always be at least one design element that is frustratingly hard to achieve using HTML and CSS (no matter how easy the designer may think it will be). The new properties available in CSS3 have reduced this frustration thankfully, but from time to time there are problems that crop up. One design feature that can be a little frustrating to work around when coding is the inclusion of normal, opaque text on a semi-transparent background. Here is a simple solution to get round this problem.
In the past I have used absolutely positioned divs and the z-index
property to achieve the desired result. There is, however, a much simpler solution.
You want the background of a div to be transparent, but not the text – this requires using an RGBa value for the background colour of the div. From time to time you may use RGB values for setting colours in your CSS (e.g. rgb(170, 187, 97)
), an RGBa value simply adds an alpha-transparency value to that code, so the HTML and CSS for this is:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container">Lorem ipsum dolor</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container { | |
background: rgb(170, 187, 97); /* Fallback */ | |
background: rgba(170, 187, 97, 0.5); | |
} |
This would set the background of the div to have an alpha transparency value of 0.5 – this can range anywhere from 0 (fully transparent) to 1 (fully opaque). This is different from the opacity
property, as it only affects the background and not the div contents as well. For browser compatibility’s sake it is always a good idea to set a fallback background colour just in case. In this case, the best option would be to set it to the same RGB value as we have already used (just without the alpha transparency). The browser support for the RGBa colour value is absolutely fine all recent browsers, but will fail in older ones (IE is the main one to watch, as it is only supported from IE 9 and up) so the fallback colour is always necessary.
Hi Hugh,
Thanks for this great tut. Really helpful.
Kim.
Dude– this is great! I was just struggling with absolute positioning and z-index stuff. Your solution is elegant. Thanks!
Hi, My company is in the process of going live on our new site. I found the picture you posted on your Transparency blog post. We would like to use that picture on our site.
Can I get your permission to use it?
So helpful! Thank you!
;___; I love you.
really great ….. 🙂
On my website at the above, if I want to change the color of the background on the flash, do I change the so.addParam(“wmode”, “transparent”); to opaque. I want the background around the images to be 663300. Thanks and Semper Fi
Thanks, you saved me hours of aggravation!
Oh my god, I love you.
its very simple. Here is code for opacity effect. simple use the rgba color.
in HTML e.g:
in CSS:
.foo
{
height: 100px;
width: 100%;
background-color: rgba(215, 44, 44, 0.4);
}
here is the link to get the rgba colors code. http://www.css3maker.com/css-3-rgba.html
Try this.
Best of Luck
oops.. i missed html code. Here is now
Body
wow so simple and elegant. thanks!
You are able to still guide the originator to fill out an application at your
personal bank when that is your choice.
Love! Thanks.
Absolutely simple and fabulous! Best solution I’ve seen to this to date! Thank you!
Your translucent background css code i a widget was most helpful – Cant thank you enough. Much appreciated.