PDA

View Full Version : How to make transparent table background, but not text or images?



skcin7
Jan 27th, 2010, 10:25 PM
Hi all. I am stumped. I am making a table and I want the background to be 50% transparent. I have done this successfully, but the problem is that all text and images in the table are now transparent too. How can I make only the background of the table 50% transparent, but all text and images not transparent at all? Thanks

Here is my code so far


<div style="width:100%; background:#000000; padding:10px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;">
<div style="filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity: 1.0; opacity: 1.0;">All text and images here are transparent but I don't want them to be.</div>
</div>

jenius
Jan 28th, 2010, 02:14 AM
In all honesty, my advice is not to use a table. Use a div in css.

The best way to take care of this would be to do something like this, you would make the transparent background first, then layer a text and image box over the top of it, with higher specificity so that it doesn't inherit the opacity. This is the reason your images and text have the opacity, because they are nested inside an opaque element. In order to clear this opacity, you must create a new selector with higher specificity than the one that you made opaque.



<head>
<style type="text/css">

#transparent {
width: 100%;
background-color: #000000;
padding: 10px 10px 10px 10px;
opacity: .5;
(add in other opacity mods here - include -webkit, -moz, -o-, and filter:alpha)
}

#wrapper #text {
opacity: 1;
font-family: times;
etc. etc.
}
</style>
</head>
<body>

<div id="wrapper">
<div id="transparent">
<div id="text">
Blah blah blah
</div>
</div>
</div>

</body>



Obviously this is nowhere near complete and functioning, but I hope you get the idea of what I'm trying to say