Korzystanie z opacity. Jak stworzyć takie coś ?, css Opcje

[FlooX]

Witam,

Mam do Was pytanie. Jak stworzyć takiego boxa (czy jak to nazwać) jaki widnieje na głównej stronie onetu:

(IMG:http://img16.imageshack.us/img16/4594/onetc.th.jpg)

chodzi mi tutaj między innymi o te przeźroczyste pole z dłuższym tekstem itd. Chciałem sciągnąć ze źródła onetu, ale jest tam taki syf, że ciężko sie połapać. Udało mi się osiągnąć takie coś:

(IMG:http://img16.imageshack.us/img16/8642/onet2.th.jpg)

Jednak jak widac, napisy w polach rpześwitujących są mało czytelne (bo też zmienia im się opacity) mimo wsadzenia do osobnych paragrafów itd..
Może ktoś pomóc ?

html:

[HTML] pobierz, plaintext 
<div class="focia">
		<img src="obr.jpg" alt="" />
		<p class="title"> TO jest jakiś tytuł </p>
		<div class="text"><p>Polacy robią wioche i nie potrafią grać w piłke nożną nad czym cała polska ubolewa i łączy się w cieprnieniu składając sobie kondolencje :(</p></div>
		</div>
[HTML] pobierz, plaintext 

css:

Kod

p.title {
    z-index:2;
    background:#ff0000;
    color:#ffffff;
    padding:5px;
    margin:5px;
    position:absolute;
    opacity:0.85;
}
div.text {
    z-index:2;
    position:absolute;
    vertical-align:bottom;
    margin-top:50px;
    width:410px;
    color:#ffffff;
    opacity:0.7;
    font-weight:400;
    background:#787878;
    text-transform:none;
}
div.text p {
    color:#ffffff;
    text-transform:none;
    padding:1px 10px;
}
div.focia {
    width:410px;
}
img {
    position:absolute;
}