css alpha, is it possible to have a differnt alpha value for text and backgrounds in the same table cell?

css alpha, is it possible to have the alpha of text being 100% whilst the background of the same cell is 30%?
sousflaiAsked:
Who is Participating?
 
ZylochConnect With a Mentor Commented:
Sure, no problem :)
0
 
ShaneJonesCommented:
shoud be able to, yes.

ShaneJones
0
 
sousflaiAuthor Commented:
cheers for the detailed response
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
sousflaiAuthor Commented:
If anyone has a css solution for displaying taxt and background in diferent opacities I would be grateful
0
 
ShaneJonesCommented:
http://www.mandarindesign.com/opacityblending.html

Some good information here that i have used

ShaneJones
0
 
ZylochCommented:
Alright, sousflai, it is rather difficult to figure out a completely CSS example. I've tried playing with IE's alpha filters but they do not seem to want to layer. I don't even want to experiment with -moz-opacity. But since alpha 100% is merely completely solid (if you go by PNG standards), and only your background needs to be transparent, merely use a PNG background image that has 30% in its alpha transparency channel. To have it display on IE, check out this: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
0
 
sousflaiAuthor Commented:
I was hoping for a purely css solution,

what I am using at the moment is below...
.vic {width:44px;
      padding: 3px 0px 4px 0px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      background-color:#2A8DCF;
      color:#FFFFFF;
      filter: Alpha(Opacity=50);
      moz-opacity:0.5;
      opacity:0.5;
      text-align: center;
      vertical-align: top;
}
.vic2 {padding: 3px 0px 4px 12px;            

            color:#FFFFFF;
      background-color:#153067;
      color:#FFFFFF;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      filter: Alpha(Opacity=20);
      moz-opacity:0.2;
      opacity:0.2;
      vertical-align: top;}
.black {      color:#000000;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
            filter: Alpha(Opacity=100);
      moz-opacity:1.0;
      opacity:1.0;}

I have tried to incorporate the sapn style into the table style but no good so far,

cheers steve
0
 
ZylochCommented:
I have tried the same thing as you. It seems as if only one type of alpha transparency can be shown and it can't be overwritten. Although I'll try to check and see if there are ways around this.

Ted
0
 
ZylochCommented:
Interesting enough, if you add position: relative to a <div> containing your text, it will shrug off alpha transparency, at least in IE. This seems to be since with position: relative, the <div> probably doesn't have layout (although the concept is a bit confusing) and the alpha filter will not apply. I do not know if this is the same for FF.

Ted
0
 
ZylochCommented:
Doesn't seem to work in FF, unfortunately. -moz-opacity seems to be inherited for all child elements. In any case, if you want to publish a website, I would go with the PNG image and perhaps messing around with AlphaImageLoader filter for IE.
0
 
sousflaiAuthor Commented:
Thanks, the div addition sounded promising,

I've tried a pgn file but this brings through some unsightly patterening, FF does seem to have a problem distingushing inherited elements, does anyone else have a solution to this?
0
 
ZylochCommented:
What do you mean by patterning? How are setting the background image currently with the filters on?
0
 
sousflaiAuthor Commented:
Ok, patternings not a problem anymore, FF holds the png alpha though ie does not? any ideas
0
 
ZylochCommented:
Have you tried the link I posted above? (http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html)

IE does not really support PNG images (as of yet), but there are ways to fake support, especially with the AlphaImageLoader filter.
0
 
sousflaiAuthor Commented:
Thanks Zylock

I've it to work by doing browser detection in the css to combine the best of all the theories. FF is served a png, whilst ie is blocked from the png as it is fine defining new css properties for a nested relative div.

please see below

.vic2 {padding: 3px 0px 4px 12px;            
            filter: Alpha(Opacity=20);
      moz-opacity:0.2;
      opacity:0.2;
            background-color:#153067;
      vertical-align: top;}
      
html>body .vic2{filter: Alpha(Opacity=100);
      moz-opacity:1.0;
      opacity:1.0;
      background-color:inherit;
padding: 3px 0px 4px 12px;            
      background-image: url(../images/20.png);
      color:#000000;
      vertical-align: top;}

thanks for the help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.