Font in transparent area

Question

Hello, I'm using JQuery library. I make some div transparent (0.7). There are some text in that div. And I see unpleasant situation: text font is ugly. As I understand, cause all div-area is transparet, my text also. Could I make it untransparent?

upd

I tried to make my div untransparent: the text is great! So, how can I make my div transparent, but text which is included there shouldn't be.

Tested in Win,Linux,MacOS. Chrome,Firefox,Opera,IE

Answer 1

Interesting question. Here's the solution that comes to my mind first:

<style>
  .wrapper {position:relative;}
  .transparent { position:absolute; background:red; top:0; bottom:0; left:0; right:0;}
</style>

<script>
  $(document).ready(function(){
    $('.transparent').css('opacity',.7)
  });
</script>

<div class="wrapper">
   <div class="transparent"> </div>
   <div class="opaque">your text</div>
</div>

Basically you're positioning the text to sit on top of the transparent box.

Answer 2

I tend to use a semi-transparent .png files and then use a hack for IE6, which is described in this thread along with the other options.

Answer 3

You could use rgba() to specify the color of the box, rgba() doesn't get inherited by any child elements. unfortunately rgba is only supported by more modern browsers (FF, safari, chrome), but is fantastic to use.

#yourbox {
    background-color:rgba(red,green,blue,alpha);
{

All you do is get the value of the colour you want in RGB, then set the alpha value last, you also need to set a fallback value for browsers that don't support it.

#yourbox {
background-color:#fff;    
background-color:rgba(255,255,255,0.5);
{

This will give you a white box at 50% opacity in most modern browsers, but will give you a solid white box in most versions of IE.

Answer 4

I create a generic class for translucent backgrounds, a generic class for invisible text containers, and an class for the specific instance, with any size and position styling. For instance I might have .color_box, .text_box, and .side_note. Then I create some code like the following:

Styles, like this:

.color_box, .text_box {
position: absolute;
z-index: 20;
...
}

.color_box {
background: #xxxxxx;
opacity: .5;
z-index: 10;
...
}

.side_note {
top: 50px;
left: 100px;
width: 240px;
...
}

and HTML like this:

<div class="text_box side_note">lorem ipsum dolor sig amet...</div>
...
<div class="color_box side_note"></div>

The second div can go anywhere inside the same container as the first, and I prefer to put to as late as possible since it's not helpful for SEO purposes. This particular setup is most useful for a site with many such translucent boxes. You need one class to create a new setup, and you re-use the .color_box and .text_box classes for each one. If you need to change the background color, it's in one place. The positioning for any one box is in a single class.