It’s possible to make backgrounds transparent without affecting their child elements, like it gonna happen with opacity CSS. It can be done with RGB alpha for browsers, and with Internet Explorer filters.
Here’s the code:
#container {
background:transparent;
zoom: 1;
/* RGBa with 0.4 opacity */
background: rgba(235, 234, 228, 0.4);
/* IE6 & 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66EBEAE4, endColorstr=#66EBEAE4);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66EBEAE4,endColorstr=#66EBEAE4)";
}The HEX value for Explorers filters can be calculated from Firebug in its console. Run
//replace 0.4 with needed opacity value Math.floor(0.4 * 255).toString(16);
This will give you first 2 digits in startColorstr=#66EBEAE4. Then you add the background basic color. Another tool to count it online is here.
test
P.S. This would not validate, but it works 🙂
Hello sir,
Thanks for your code.
it works charm in ie7, ie9, chrome and firefox, but not in ie 8.
Yuga.
Hi, I added this test, seems to work in ie8 also.
Thanks for the post but I need a little help. I have used the following code, and it shows my rounded corners on the semi-opaque background in Chrome and Firefox but not in IE9? I get a different opacity corner but you can see the rounds as well?
.main { width:1020px; padding:0; margin:0 auto;
background:transparent;
zoom: 1; /* RGBa with 0.4 opacity */
background: rgba(235, 234, 228, 0.3); /* IE6 & 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66EBEAE4, endColorstr=#66EBEAE4); /* IE8 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#66EBEAE4,endColorstr=#66EBEAE4)”;
-moz-border-radius: 15px;
border-radius: 15px;}
Sorted it, thx
Hello, i wonder how i can implement a gradient into the tranparency. i had it before, however i need to not affect my children”. so whats a solution ?
You can make gradient with rgba colors. Here it’s easy: http://www.colorzilla.com/gradient-editor/