HTML, CSS and anything else that deals with client side capabilities.
Moderator: General Moderators
simonmlewis
DevNet Master
Posts: 4435 Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:
Post
by simonmlewis » Tue Apr 03, 2012 11:40 am
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.
social_experiment
DevNet Master
Posts: 2793 Joined: Sun Feb 15, 2009 11:08 am
Location: .za
Post
by social_experiment » Wed Apr 04, 2012 3:20 am
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
“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:
Post
by simonmlewis » Wed Apr 04, 2012 3:25 am
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.
social_experiment
DevNet Master
Posts: 2793 Joined: Sun Feb 15, 2009 11:08 am
Location: .za
Post
by social_experiment » Wed Apr 04, 2012 4:12 am
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:
Post
by simonmlewis » Wed Apr 04, 2012 4:17 am
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.
social_experiment
DevNet Master
Posts: 2793 Joined: Sun Feb 15, 2009 11:08 am
Location: .za
Post
by social_experiment » Wed Apr 04, 2012 4:23 am
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:
Post
by simonmlewis » Wed Apr 04, 2012 4:28 am
The background color only.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
social_experiment
DevNet Master
Posts: 2793 Joined: Sun Feb 15, 2009 11:08 am
Location: .za
Post
by social_experiment » Wed Apr 04, 2012 5:29 am
“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:
Post
by simonmlewis » Wed Apr 04, 2012 5:37 am
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.
pickle
Briney Mod
Posts: 6445 Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:
Post
by pickle » Wed Apr 04, 2012 12:58 pm
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.