Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Cofnięcie przezroczystości potomkowi
Forum PHP.pl > Forum > Przedszkole
sadistic_son
Witam.

  1. <div style="background-color:#f00; opacity:0.2;filter:alpha(opacity=20);">
  2. <div>To jest tekst ktory jest przezroczysty a nie ma byc.</div>
  3. </div>
Otóż chcę aby tylko samo tło (w tym wypadku kolor czerwony) było przezroczyste a tekst wewnątrz już nie. Jeśli do wewnętrznego diva dopiszę to: style="opacity:1;filter:alpha(opacity=100);" lub to style="opacity:1;" to nadal niestety tekst jest przezroczysty tak samo jak jego rodzic. A ma być w pełni widoczny - nieprzezroczysty.
Można temu jakoś zaradzić?
mortus
Niestety nie można. Jedynym rozwiązaniem jest umieszczenie nieprzezroczystego div-a niżej i przesunięcie go nad div-a przezroczystego.
sadistic_son
No dobra, zrobiłem tak jak mówisz i nadal tekst byl przezroczysty. Teraz zakombinowalem tak:
  1. <div style="width:300px; height:400px;">
  2. <div style="z-index:1; width:300px; height:400px;color:#000;">
  3. teskst teskst teskst teskst teskst teskst <br>teskst teskst teskst teskst teskst teskst <br>teskst teskst teskst teskst teskst teskst <br>teskst teskst teskst teskst teskst teskst <br>teskst teskst teskst teskst teskst teskst <br>teskst teskst teskst teskst teskst teskst <br>teskst teskst teskst teskst teskst teskst <br>
  4. </div>
  5. <div style="z-index:-1; background-color:#f00; opacity:0.2;filter:alpha(opacity=20); width:300px; height:400px;">
  6. <div>
  7. </div>
Mamy div container o rozmiarach 300x400. W nim div z tekstem i z-index:1 a pod nim pusty div z czerwonym przezroczystym tlem. Rzecz w tym ze one wyswietlaja sie jeden pod drugim, ale do tego powinienem zaraz dojsc aby jeden nalozyc na drugi.
Tylko ze to rozwiazanie spowoduje ze przy zmianie rozmiaru diva z tekstem (dynamiczny tekst) ten przezroczysty div nie bedzie sie rzciagal tak jak nalezy.
mortus
<div> z tekstem daj poniżej i ustaw mu atrybuty stylu position: relative; top: -400px; i chyba również width: -300px;, ewentualnie spróbuj użyć margin-top: -400px;.
Nie pamiętam dokładnie, czy to wystarczy, aby prawidłowo wypozycjonować te div-y.

EDIT
W sumie to dopiero ten kod odpowiada temu, o czym myślałem.

Właśnie znalazłem stronę, z której pochodzi rozwiązanie.
sadistic_son
Ok, to daje efekt zadowalający ale tylko dla sztywno ustawionej treści. Jeśli będę chciał wrzucić tekst np. z bazy i zmieni się ilość tekstu, a co za tym idzie jego rozmiar to wszystko się posypie. Ale dzięki anyway. "Pomógł" rozdam później.
A tymczasem może jakieś inne pomysły nadające się jednocześnie do dynamicznych rozmiarów div'ów?
toaspzoo
text-opacity;
mortus
Jeśli tło jest jednolite, to alternatywą pozostaje umieszczenie w tle odpowiedniego obrazka PNG.
  1. <div style="background: transparent url(obrazek.png) repeat">
  2. <div>text text text</div>
  3. </div>

i nie ma problemu.
Oczywiście dla starszych przeglądarek trzeba skorzystać z hacków.
sadistic_son
Cytat(mortus @ 27.06.2011, 11:36:39 ) *
Jeśli tło jest jednolite, to alternatywą pozostaje umieszczenie w tle odpowiedniego obrazka PNG.
No jest jednolite. Ale nie bardzo rozumiem co to da? Jeśli dam w tle jednokolorowy obrazek png z transparencją to po prostu go nie będzie widać i tyle.
mortus
Będzie go widać, bo transparent to wartość atrybutu background-color. Dopóki obrazek nie zostanie zapisany w pamięci podręcznej div będzie przezroczysty. Istotne jest również użycie odpowiednio przygotowanego obrazka z rozszerzeniem .png, tzn. obrazek powinien mieć odpowiednią przezroczystość.
sadistic_son
Cytat(mortus @ 27.06.2011, 17:17:35 ) *
Dopóki obrazek nie zostanie zapisany w pamięci podręcznej div będzie przezroczysty.
No to z tego wynika, że tylko przy pierwszym załadowaniu strony będzie przezroczysty.
Dobra, nie ma co dywagować tylko trzeba to sprawdzić. Obczaję to jutro i odświeżę temat. A tymczasem dzięki za odpowiedzi.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.