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:



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ś:



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;
}

[zegarek84]

zrób 2 warstwy wewnątrz ogólnej - skorzystaj z pozycjonowania - tekst nie może być w warstwie z przezroczystością niestety.... tą warstwę z tłem wypozycionuj tak by była za tekstem... zerknij np. do tego i jeszcze do linku tam z pozycjonowaniem a resztę potestuj w css:
http://forum.php.pl/index.php?showtopic=13...mp;#entry658081

[f1xer]

możesz też zrobić plik png o przeźroczystości np. 50% i wrzucić jako tło.

[erix]

Było...

W utopii byłoby to RGBA, ale w rzeczywistości jest to niemożliwe i zostaje tylko półprzezroczysty PNG, ew. osobna warstwa z ustawionym tłem i odpowiednią przezroczystością - wypozycjonowana między obrazkiem a właściwym tekstem.

[kazag]

jak wyżej, daj warstwę z obrazkiem, na nią nałóż warstwę z tłem (position:absolute tu musi być), któremu nadasz przezroczystość w CSS , a na to jeszcze nałóż warstwę z tekstem. u mnie to działa.