CSS only Transparent background in DIV with child elements opaque
-
I have a slight issue, tried everything to make this work, half the time I can get the background to be 100% transparent so you don't see it and have the other child elements opaque, but all I want is the background to be 50% transparent so the main background is showing through it. First, here is an image of one of the pages. I want the black border to be semi transparent (50%) but everything else inside this area to appear as it is 100% opaque (that is all child elements inside the body_wrapper): http://img697.imageshack.us/img697/8008/webpage.jpg[^] Here is the code in my CSS file that controls the DIV tag (the "background: #000000;" is the black background code that I wanted to have semi transparent:
.body_wrapper {
padding: 0 20px 20px; background: #000000; -webkit-border-radius: 5px; \_display: inline;}
The only thing is that I can't modify anything on my HTML pages as I have too many and have to do all this with my CSS file. I have been looking all over and tried a few things but nothing seems to work, can anyone help?
In the end we're all just the same
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
-
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
Thanks all got it :) . 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 { background-color: rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000); zoom: 1; /* Force hasLayout in IE. */ }In the end we're all just the same
-
Thanks all got it :) . 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 { background-color: rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000); zoom: 1; /* Force hasLayout in IE. */ }In the end we're all just the same
Glad to help. ;)
Posted from SPARTA!!!!!!!!!! 2.0. Don't forget to rate my post if it helped! ;)
-
Glad to help. ;)
Posted from SPARTA!!!!!!!!!! 2.0. Don't forget to rate my post if it helped! ;)
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
-
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
Using proprietary filters in IE generally causes strange side effects. All I can say: http://dowebsitesneedtolookexactlythesameineverybrowser.com/ ;P
Posted from SPARTA!!!!!!!!!! 2.0. Don't forget to rate my post if it helped! ;)
-
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
-
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.
I already use a reset CSS, but thanks
In the end we're all just the same
-
Using proprietary filters in IE generally causes strange side effects. All I can say: http://dowebsitesneedtolookexactlythesameineverybrowser.com/ ;P
Posted from SPARTA!!!!!!!!!! 2.0. Don't forget to rate my post if it helped! ;)
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
-
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
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! ;)
-
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! ;)
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
