Transparent Boxes.. without transparent text

red_ice · 28-08-2010 09:41PM #1

.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 · 28-08-2010 10:30PM

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 · 28-08-2010 10:54PM

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 · 28-08-2010 11:32PM

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 · 28-08-2010 11:32PM

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 · 29-08-2010 01:13AM

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.

Transparent Boxes.. without transparent text

Comments