Transparent Boxes.. without transparent text

red_ice

.box
{
background-color:#151519;
height: 50px;
width: 300px;
filter:alpha(opacity=50);
opacity: 0.50;
}



h2
{
color:#FFF;
filter:alpha(opacity=100);
opacity: 1.00;
-moz-opacity:1.0;
-khtml-opacity: 1.0;
}

The above code is what i have so far on a box that i want to shade over a certain area of a page. However, the text thats inside that box (lets say h2) wont stay at full opacity.

Any ideas?

Cheers

Liam Byrne

That's because h2's "100%" is "100% of the parent". That's the way CSS works.

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

red_ice

that was my understanding of it liam, and your reply was very helpful, however it leaves me with then problem of dynamic text not expanding the box that its covering.

Any ideas?

Liam Byrne

Depends on whether you need to support IE

http://greenevillage.net/csspages/rgba.aspx

Other than that, you're looking at an image solution.

Goodshape

Opacity isn't what you need. You're looking for background rgba colour.

Background: rgba(255, 255, 255, 0.5), for instance. Google it . Browser support ain't the best though.

red_ice

Cheers fellas

I've decided to scrap that idea now. Im trying to build a site from top to bottom in CSS/jquery without images. I had a subtle, tasteful idea, but the more it developed the more tacky it started to look.

I've settled on full opacity colour, looks well.

appreciate the help.