Web Development

Re: CSS only Transparent background in DIV with child elements opaque

29-Jul-10 8:34

Give this a try. Replace the .body_child with whatever class name you have used. The wrapper should give you 50% opacity (transparency) and the transparency removed for the child.

.body_wrapper {
   padding: 0 20px 20px;
   -webkit-border-radius: 5px;
   _display: inline;
   background-color: #000000;  /* the background          */
   filter:alpha(opacity=50);   /* Internet Explorer       */
   -moz-opacity:0.5;           /* Mozilla 1.6 and below   */
   -webkit-opacity:0.5;        /* Safari                  */
   opacity: 0.5;               /* newer Mozilla and CSS-3 */
}
.body_child {
   filter:alpha(opacity=100);  
   -moz-opacity:1.0;           
   opacity: 1.0;    
   -webkit-opacity: 1.0;          
}

modified 1-Aug-19 21:02pm.

Dave McCool30-Jul-10 14:29

Re: CSS only Transparent background in DIV with child elements opaque

30-Jul-10 14:29

Hi Richard,

that seems like a great solution, but I came across a snag, not to do with the code you posted (it would work fine) but more to myself, a small problem that I created meaning I can't use that code. All the code for child elements inside the body_wrapper are on my webpages, not my CSS and now I have over 300 webpages and can't go in and put the code in the CSS file as it would take to long to put the code there and remove the code from each page Sigh | :sigh:

I had an idea though but couldn't find a solution that uses a CSS file only. I have a background image I wanted to use instead of this:

background-color: #000000;  /* the background          */

Now I wanted the whole image to be 50% transparent like what I wanted to do before I realised my screw up. I have looked about and only found ways of making parts of the image transparent when you insert them on a webpage, but is is possible to make the whole image semi transparent? This would solve my issue then as the image would be transparent and I wouldn't have to modify any more code to fix the parent/child transparecy issue.

Thanks

David McCormick

In the end we're all just the same

User 171649231-Jul-10 0:37

Re: CSS only Transparent background in DIV with child elements opaque

31-Jul-10 0:37

David,

You might be able to do something like

.body_wrapper {
        background-image:url(path_to/image_name.jpg); /* add repeat or no-repeat or repeat-x or repeat-y as necessary (or not at all) */
	height:100%;  /* use as necessary */
        filter:alpha(opacity=50);    
        -moz-opacity:0.5;            
        -webkit-opacity:0.5;         
        opacity: 0.5;                
}

Because of CSS inheritance rules http://www.w3.org/TR/CSS2/cascade.html[^], the above might not do what you want

modified 1-Aug-19 21:02pm.

User 171649231-Jul-10 2:50

Re: CSS only Transparent background in DIV with child elements opaque [modified]

31-Jul-10 2:50

As an alternative, instead of editing file by file the code within those 300 pages, you could use Notepad++ [^] and do similar to this [^]or you may be able to do a similar thing with Windows Grep [^]. That's just a thought for you ...

modified 1-Aug-19 21:02pm.

dawmail3336-Aug-10 13:26

Re: CSS only Transparent background in DIV with child elements opaque

6-Aug-10 13:26

Try this:

.body_wrapper
{
    background-color: rgba(0,0,0,0.5);
}

It will work in browsers that support CSS3, which is becoming more common. Don't know about earlier IE's in particular though, I'm sorry to say.

The above code simply sets the div to have a semi-transparent background (approx. 50% black). It's called ARGB.

HTH.

modified on Saturday, August 7, 2010 3:11 AM

Dave McCool7-Aug-10 3:11

Re: CSS only Transparent background in DIV with child elements opaque

7-Aug-10 3:11

Thanks all got it Smile | :)

. I tried the rgba(0,0,0,0.5); and it worked, but not on IE so I thought and then did this and now it works in IE:

.Body_Wrapper<br />
{<br />
    background-color: rgba(0,0,0,0.5);<br />
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);<br />
    zoom: 1; /* Force hasLayout in IE. */<br />
} <br />

In the end we're all just the same

dawmail3337-Aug-10 3:12

Re: CSS only Transparent background in DIV with child elements opaque

7-Aug-10 3:12

Glad to help. Wink | ;)

Posted from SPARTA!!!!!!!!!! 2.0.

Don't forget to rate my post if it helped! Wink | ;)

Dave McCool7-Aug-10 3:21

Re: CSS only Transparent background in DIV with child elements opaque

7-Aug-10 3:21

I have only one issue with the code, although it works and now works on IE, on IE any text in child elements does not look smooth:

Page on IE: http://img339.imageshack.us/img339/5572/webpageie.jpg[^]

Same page on Google Chrome: http://img839.imageshack.us/img839/985/webpagechrome.jpg[^]

Is there any way of making the text in the child elements appear normal in IE?

In the end we're all just the same

dawmail3337-Aug-10 3:24

Re: CSS only Transparent background in DIV with child elements opaque

7-Aug-10 3:24

Using proprietary filters in IE generally causes strange side effects.

All I can say:
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Poke tongue | ;-P

Posted from SPARTA!!!!!!!!!! 2.0.

Don't forget to rate my post if it helped! Wink | ;)

Dave McCool7-Aug-10 4:08

Re: CSS only Transparent background in DIV with child elements opaque

7-Aug-10 4:08

However, IE being the default broswer that a lot use, I would like the transparacy to work well in it, I use google analytics and more people view my current site in IE than in other browsers, and if the text doesn't look smooth and normal on it, its not really going to help much, its not so much important that the website doesn't look 100% in other browsers as I can say this on my home page.

In the end we're all just the same

dawmail3337-Aug-10 4:13

Re: CSS only Transparent background in DIV with child elements opaque

7-Aug-10 4:13

All I can say mate, is good luck.

IE is a bitch to design for. End of story.
Until IE9 is mainstream, IE is going to be the most hated browser for web designers. Trust me, not-so-smooth text seriously is the least of your worries. People aren't going to immediately leave because of it.

Posted from SPARTA!!!!!!!!!! 2.0.

Don't forget to rate my post if it helped! Wink | ;)

Dave McCool7-Aug-10 4:18

Re: CSS only Transparent background in DIV with child elements opaque

7-Aug-10 4:18

Thanks, your right. I'll see what I can do, I know IE is annoying. Its just that the tex seems harder to read this way and if people find the text a bit hard to read, they won't stay long. I'll see what I can do.

In the end we're all just the same

User 17164927-Aug-10 3:57

Re: CSS only Transparent background in DIV with child elements opaque

7-Aug-10 3:57

Browsers do not render all content exactly the same. But using a reset.css such as via here http://meyerweb.com/eric/tools/css/reset/[^] does help.

modified 1-Aug-19 21:02pm.

Dave McCool7-Aug-10 4:02