Page 1 of 1

<td> transparent background, but not images inside - how?

Posted: Tue Apr 03, 2012 11:40 am
by simonmlewis

Code: Select all

<table background='/images/bg_image.png' style='width: 950px; height: 455px' class='table'>
<tr valign='top'>
<td bgcolor="#ffffff" style="
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
" width='50%'>
<div style='padding: 5px'><div class='head'>Welcome to our show</div><br/>
Text appears in here.
<br/><br/>
<img src='/images/imagehere.png'  style='border: 2px solid #000000; margin-right: 30px;
opacity: 1.0;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
'/>
<img src='/images/image2here.png'  style='border: 2px solid #000000'/>
</div></td>
<td></td></tr></table>
This works. The background shows nice, and the left Cell is transparent white.
But how to I set the images inside the cell to NOT be transparent? I've even tried overriding the opacity of the image and it doesn't work.

Re: <td> transparent background, but not images inside - how

Posted: Wed Apr 04, 2012 3:20 am
by social_experiment
Can you paste of screenshot of the results; (also which browser you are using for this)

I added my own image and viewed the page in Chrome, it looks like the images inside the <td> aren't opaque

Re: <td> transparent background, but not images inside - how

Posted: Wed Apr 04, 2012 3:25 am
by simonmlewis
Actually they are. I can see the curve of the head phone on the LEFT image, just behind the tiny grey part.

Re: <td> transparent background, but not images inside - how

Posted: Wed Apr 04, 2012 4:12 am
by social_experiment
my bad. Can you show a screenshot of what it looks like on your system;

Re: <td> transparent background, but not images inside - how

Posted: Wed Apr 04, 2012 4:17 am
by simonmlewis
Unfortunately I cannot because I have begun the work and what's displayed is confidential.
But like yours, it shows the images in the foreground slightly transparent. And the black text is slightly greyer than black (so transparent too).

It seems that anything in a transparent set box, is forced to be trans. too.

Re: <td> transparent background, but not images inside - how

Posted: Wed Apr 04, 2012 4:23 am
by social_experiment
Ok; just to clarify something: what has to appear opaque; the left cell with the text?

Re: <td> transparent background, but not images inside - how

Posted: Wed Apr 04, 2012 4:28 am
by simonmlewis
The background color only.

Re: <td> transparent background, but not images inside - how

Posted: Wed Apr 04, 2012 5:29 am
by social_experiment

Re: <td> transparent background, but not images inside - how

Posted: Wed Apr 04, 2012 5:37 am
by simonmlewis
Not really, because that changes what the transparency is doing.
The transparency is set to white with 20% transparency.

The innerdiv from that site then put a solid white box over the top.

My issue is the text and images in the box are made transparent.

Re: <td> transparent background, but not images inside - how

Posted: Wed Apr 04, 2012 12:58 pm
by pickle
Opacity is inherited & cannot be overridden away. By that I mean, if you set an element to 50% opacity, then everything below that will be 50% opacity. Even setting child elements to 100% opacity means they'll be 100% of 50% = 50%.

If you want the background colour transparent you have 2 options:
[*]Use the new CSS3 rgba() colour - no real fallback though for older browsers.
[*]Use a background PNG with a transparency.