CSS Background Transparency, Not Affecting Child Elements

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 🙂

Share:
This entry was posted in CSS CheatSheets and tagged . Bookmark the permalink.

6 Responses to CSS Background Transparency, Not Affecting Child Elements

  1. yuga says:

    Hello sir,

    Thanks for your code.
    it works charm in ie7, ie9, chrome and firefox, but not in ie 8.

    Yuga.

  2. Kevin says:

    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;}

  3. 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 ?

Leave a Reply

Your email address will not be published. Required fields are marked *