how to get 100% opacity on text and 40% on background arround text.

[pioneerx01]

Basically I am working with this code:

 

p {
background-color:white;
filter:alpha(opacity=40);
opacity: 0.40;
margin:0px;
border-radius: 10px;
padding:10px;
text-align:justify;
color:black;
font-size:16px;
}

 

But this puts both black text and white background at 40%. How do I get text back up to 100%?

[freelance84]

You can have the text in the same tag as the transparency gets applied to everything within it

 

 

[cssfreakie]

there are 3 ways to do this:

 

1) is to make a small transparent png and use that as background image  for the container. Not only is that much more cross browser compatible (until ie6), but it also a tiny bit easier.

 

2) second use rgba on the container

 

3)If you want to stick with these opacity properties you need as said 2 containers, which are overlapping each other. In order to make that work you need to play with position relative, position absolute and a the z-index property.

 

I prefer the first since not everybody has great browsers yet