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 » Thu Jun 03, 2010 9:32 am
Code: Select all
.opacity {
background-color: #000000;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
}
I am using this CSS to set a cell transparent with an image in the background.
But it is also setting the TEXT transparent too. I want to set the transparency so I can overlay it with Black or White text.
How do you do this?
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 » Thu Jun 03, 2010 10:10 am
You can't. Opacity is inherited.
About your only options are:
1) Put a couple <div>s in that cell, do some funky positioning so one div is completely behind the other, put the text in one, and set the background colour (and opacity) in the other.
2) Hope your users are using a CSS3 compatible browser, and use the rgba colour mode for the background color.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
simonmlewis
DevNet Master
Posts: 4435 Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:
Post
by simonmlewis » Thu Jun 03, 2010 10:52 am
Damn.
I have seen many sites that do it and it works.
But I fail to see how ocacity of a BACKGROUND can override the opacity of a FONT COLOR.
How do you get it behind it, if the CSS control the Cell.
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 » Thu Jun 03, 2010 11:09 am
You're not setting a background opacity. You're setting a background colour, then the opacity of the entire cell.
This is untested, but may work to get what you want:
Code: Select all
<td>
<div style = "position:relative;">
<div style = "position:absolute;width:100px;height:100px;top:0;left:0;background-color:#000;opacity:0.4;">
</div>
<div style = "position:absolute;width:100px;height:100px;top:0;left:0;">
text goes here
</div>
</div>
</td>
The first <div> is because you need your two inner divs to be positioned absolutely, and the only way to stop them from flying around your page is to put them inside a relatively positioned element. Firefox doesn't listen to "position" styles on <td>, hence the <div>
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
kaszu
Forum Regular
Posts: 749 Joined: Wed Jul 19, 2006 7:29 am
Post
by kaszu » Thu Jun 03, 2010 11:31 am
You can also use transparent PNG-24 image for background
pickle
Briney Mod
Posts: 6445 Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:
Post
by pickle » Thu Jun 03, 2010 11:33 am
kaszu wrote: You can also use transparent PNG-24 image for background
Just a caveat that transparent PNGs don't work in IE6/7 without some funky tweaking.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
kaszu
Forum Regular
Posts: 749 Joined: Wed Jul 19, 2006 7:29 am
Post
by kaszu » Thu Jun 03, 2010 11:38 am
In IE7 should work fine (but it was causing hasLayout?), for IE6 can use filter:
Code: Select all
* html .opacity {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
}
pickle
Briney Mod
Posts: 6445 Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:
Post
by pickle » Thu Jun 03, 2010 11:44 am
kaszu wrote: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
I'd consider that pretty funky
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.