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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

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

Post 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
Attachments
Viewed in Chrome 8.0.552.237
Viewed in Chrome 8.0.552.237
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

Actually they are. I can see the curve of the head phone on the LEFT image, just behind the tiny grey part.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

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

Post by social_experiment »

my bad. Can you show a screenshot of what it looks like on your system;
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

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

Post by social_experiment »

Ok; just to clarify something: what has to appear opaque; the left cell with the text?
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

The background color only.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

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

Post by social_experiment »

“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply