Forum PHP.pl > Korzystanie z opacity. Jak stworzyć takie coś ?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Korzystanie z opacity. Jak stworzyć takie coś ?

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

FlooX

13.09.2009, 21:04:52

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

13.09.2009, 22:38:41

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

13.09.2009, 23:17:57

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

erix

14.09.2009, 17:19:37

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

15.09.2009, 07:06:24

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.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.