Solved

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

Posted on 2006-06-23
15
667 Views
Last Modified: 2008-03-17
css alpha, is it possible to have the alpha of text being 100% whilst the background of the same cell is 30%?
0
Comment
Question by:sousflai
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 2
15 Comments
 
LVL 12

Expert Comment

by:ShaneJones
ID: 16968609
shoud be able to, yes.

ShaneJones
0
 

Author Comment

by:sousflai
ID: 16968699
cheers for the detailed response
0
 

Author Comment

by:sousflai
ID: 16968850
If anyone has a css solution for displaying taxt and background in diferent opacities I would be grateful
0
How To Install Bash on Windows 10

Windows’ budding partnership with Canonical has certainly led to some great improvements. One of them being the ability to use Bash on your Windows machine without third party applications! This might be one of the greatest things a cloud engineer in a Windows environment can do!

 
LVL 12

Expert Comment

by:ShaneJones
ID: 16968903
http://www.mandarindesign.com/opacityblending.html

Some good information here that i have used

ShaneJones
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 16968999
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
 

Author Comment

by:sousflai
ID: 16969253
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 16969283
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 16969320
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 16969340
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
 

Author Comment

by:sousflai
ID: 16969414
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 16969434
What do you mean by patterning? How are setting the background image currently with the filters on?
0
 

Author Comment

by:sousflai
ID: 16969539
Ok, patternings not a problem anymore, FF holds the png alpha though ie does not? any ideas
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 16969565
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
 

Author Comment

by:sousflai
ID: 16969625
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
 
LVL 36

Accepted Solution

by:
Zyloch earned 500 total points
ID: 16969639
Sure, no problem :)
0

Featured Post

Do you have a plan for Continuity?

It's inevitable. People leave organizations creating a gap in your service. That's where Percona comes in.

See how Pepper.com relies on Percona to:
-Manage their database
-Guarantee data safety and protection
-Provide database expertise that is available for any situation

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question