I'm getting transparent text and I only want transparent background how do I fix it?

This is the CSS that renders the window transparent:

&l开发者_运维百科t;style type="text/css">
.tooltip {
 background:#1C1C1C url(/tools/img/tooltip/black_arrow.png);
 font-size:12px;
 font-weight: bold;
 height:80px;
 width:250px;
 padding: 10px 0px 20px 20px;
 color:white; 
 filter:alpha(opacity=60);
 opacity:.6;
}
</style>

How do I change it so the text doesn't become transparent? thanks

Use rgba for your background instead of the opacity property:

background-color: rgba(28, 28, 28, 0.6);

Of course this is only supported in modern browsers (glares sternly at IE8 and below), so you'll need a transparent png file for IE8 and 7.

However, you're already using a background image here, so things get a little tricky. See if you can assign the current background image to another element, or something else to get rid of that background image there.

Then, you'll have to take care of IE6 - which doesn't support transparent png. Use the DD_BelatedPNG or some similar script to get transparent png support for IE6.

Modernizr.js can be used to detect support for rgba, so your final solution might look something like:

.tooltip {
   background-color: #565656;
}

.rgba .tooltip {
   background-color: rgba(28, 28, 28, 0.6);
}

.no-rgba .tooltip {
   background-color: transparent;
   background-image: url('transparent.png');
}

And also some JavaScript:

if(!Modernizr.rgba){
     DD_belatedPNG.fix('.tooltip');
}

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

awesome tute on non transparent elements 'inside' transparent elements..

hope that helps :)

Un-nest the text from the .tooltip container.

<div class="container">
   <div class="tooltip"></div>
   <div class="text"></div>
</div>

use absolute positioning with .tooltip and .text to overlay the text on top of the tooltip. I'm relatively sure that anything nested inside the opaque container will inherit the same opacity.