CSS woes.

[Toonshorty]

Right, so I've got a div with the following CSS Class:



width: 100%;
height: 75px;
background: #000;
opacity: 0.5;
border: 1px solid #FFF;
border-radius: 5px;
float: left;
color: #fff;
font-family: 'Segoe UI', Helvetica, Tahoma;
font-size: 30px;

I then set the opacity through jQuery for IE compatibility.


$(document).ready(function(){
$('.system_header').css({ opacity: 0.5 });
});

However, the background gets its opacity of 0.5 and looks great - just how I wanted. The problem lies with the text.

Because the entire DIV gets an opacity of 0.5, the text inside also has a 50% opacity - rather than the white I was after.

Does anyone have any ideas how I can get the text to have an opacity of 1?

I've tried:


.system_header p { opacity: 1; }

That didn't work.

Nor did giving the DIV a z-index of 1 and the text a z-index of 2, both with position: relative; set.

[PeterStoba]

It's not possible iirc, you could seperate the DIV with the text from the background and have separate ocapacity.

[iGoD ReLeNtLeS]

I would suggest making a 1x1px image and using something along the lines of this to make just the background transparent


background-image: url('path/to/image/');

you can then use the below as needed, if at all.


background-repeat: repeat;
background-position: 10px center;