Log in

View Full Version : translucent background color


gib65
10-08-2009, 05:18 PM
Hello,

Is there any way to get a background color to a table cell that's translucid (i.e. half transparent/faded)? I have a general background to the body of the page and it remains fixed while the page itself scrolls (so I can't just created a darkened JPG for the table cell background). Any suggestions?
traq
10-08-2009, 07:17 PM
yes, but you need to do it in several different ways to make it cross-browser:

/*this makes elements with the class transparent_class 50% opaque*/
.transparent_class {
filter:alpha(opacity=50); /*IE*/
-moz-opacity:0.5; /*old netscape*/
-khtml-opacity: 0.5; /*old safari*/
opacity: 0.5; /*current web standard*/
}
taken from css-tricks (http://css-tricks.com/css-transparency-settings-for-all-broswers/)
gib65
10-08-2009, 07:55 PM
Thanks traq, but this also makes the contents of the cell transparent, not just the background. Is there any way to incorporate it into the background only?
traq
10-08-2009, 08:24 PM
no perfect solution. see this blog (http://css-tricks.com/non-transparent-elements-inside-transparent-elements/) at css-tricks.
jscheuer1
10-09-2009, 12:30 PM
Nowadays I would just use a semi-transparent .png image as a background image. This will leave out IE 6, but there are ways to make it render like other browsers if you so choose. However, those still using IE 6 are now thankfully a small minority and a properly constructed semi-transparent .png image used as background will still allow the content over it to be legible, just (probably) not be too pretty in IE 6.

Also, rather than go through png fix or other strategies to get IE 6 to render your background png properly, one can easily target that browser for an alternate background, like a solid color.
Elkidogz
10-21-2009, 11:22 PM
Nowadays I would just use a semi-transparent .png image as a background image. This will leave out IE 6, but there are ways to make it render like other browsers if you so choose. However, those still using IE 6 are now thankfully a small minority and a properly constructed semi-transparent .png image used as background will still allow the content over it to be legible, just (probably) not be too pretty in IE 6.

Also, rather than go through png fix or other strategies to get IE 6 to render your background png properly, one can easily target that browser for an alternate background, like a solid color.

This will work with IE 6, 7, 8 (wutevermscomesoutwiththatwillbefudgedup)

http://www.twinhelix.com/css/iepngfix/

know this, use this, love this.
jscheuer1
10-22-2009, 04:23 AM
This will work with IE 6, 7, 8 (wutevermscomesoutwiththatwillbefudgedup)

http://www.twinhelix.com/css/iepngfix/

know this, use this, love this.

There is no reason to use such a strategy with IE 7 and above. These browsers already correctly render alpha channel .png images. However, for IE 5.5 through IE 6 it is a very good strategy, though not perfect. So a word to the wise, use conditional comments to ensure that iepngfix from twinhelix or any any other png fix strategy is only applied to IE 6 and less, otherwise you may inadvertently cause problems in later IE browsers which already have native support for alpha channel .png images.
coothead
10-22-2009, 10:18 AM
Hi there gib65,

here is an example for you to try...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
body{
background-color:#000;
}
#box{
width:770px;
height:535px;
margin:30px auto;
border:5px double #f60;
background-image:url(http://www.coothead.co.uk/images/buddha.jpg);
background-repeat:no-repeat;
}
#mytable {
border:2px inset #333;
margin:161px auto;
}
#mytable td {
width:324px;
height:200px;
border:1px solid #000;
}
#container{
position:relative;
height:200px;
}
#background {
position:absolute;
width:324px;
height:170px;
padding-top:30px;
background-color:#f93;
opacity:0.4;
filter:alpha(opacity=50);
font-size:20px;
font-weight:bold;
text-align:center;
}
#foreground {
position:absolute;
width:324px;
height:200px;
line-height:200px;
font-size:20px;
font-weight:bold;
text-align:center;
}
</style>

</head>
<body>

<div id="box">

<table id="mytable"><tr>

<td>
<div id="container">
<div id="background">This is the Background</div>
<div id="foreground">This is the Foreground</div>
</div>
</td>

</tr></table>

</div>

</body>
</html>

coothead

p.s. I would recommend that you reconsider your use of tables for layout purposes.


Why tables for layout is stupid: problems defined, solutions offered (http://www.hotdesign.com/seybold/index.html)
Ten ways to speed up the download time of your web pages (http://www.webcredible.co.uk/user-friendly-resources/web-usability/speed-up-download-time.shtml)
Nested Tables: About the (ab)use of tables as layout tools in webpages. (http://www.dorward.me.uk/www/nested/)
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS (http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html)
Why go table free? (http://www.workingwith.me.uk/tablefree/why/)
Why avoiding tables (for layout) is important (http://davespicks.com/essays/notables.html)