Michał Stefański

Michał Stefański podinspektor, UM

Temat: przezroczyste divy

Witam
Jakimi parametrami należy operować aby div#content zawarty w divie#contain był przezroczysty tzn. wyświetlało się pod nim tło zdefiniowane w divie będącym pod spodem.
Tak jak na stronie: http://www.fileth.lubnet.com.pl/hesp_test/index.html
CSS http://www.fileth.lubnet.com.pl/hesp_test/style.css
Chodzi mi aby te trybki znajdujące się w tle strony były również widziane pod divem zawierającym tekst - zawartość strony.

[ Dodano: 2010-10-18, 18:59 ]
Niby udało mi się uzyskać przezroczystość na divie contain ale znajdujaca sie tresc pod tym divem czyli praktycznie cala strona jest srednio widoczna bo przezroczystość tego diva jest ograniczona. Jak zrobić zeby treść divów znajdujacych się pod spodem diva contain tego glownego - była widoczna w 100 %, a przy tym tło strony było lekko widoczne pod wszystkimi divami.
http://www.fileth.lubnet.com.pl/hesp_test01/index.html
http://www.fileth.lubnet.com.pl/hesp_test01/style.cssMichał Stefański edytował(a) ten post dnia 19.10.10 o godzinie 12:52

konto usunięte

Temat: przezroczyste divy

Proponuję Ci najpierw kliknąć w te linki, które tu wkleiłeś...
Michał Stefański

Michał Stefański podinspektor, UM

Temat: przezroczyste divy

Dzieki bardzo teraz napewno bardziej jasniej wyglada problem.
Prosil bym o wskazowki bo nie bardzo z cssem u mnie a temat przezroczystosci to juz calkiem dla mnie nowosc.
Kamil Kłosowski

Kamil Kłosowski webdeveloper
limegarden.pl

Temat: przezroczyste divy

wywal:
background-color:#FFFFFF;
(linia 165)

oraz:
background:url("sun.gif") no-repeat right center #FFFFFF;
(linia 108)

mówię o adresie: http://www.fileth.lubnet.com.pl/hesp_test/index.html

w tym drugim to chyba popłynąłeś z tematem ;)
Michał Stefański

Michał Stefański podinspektor, UM

Temat: przezroczyste divy

To wlasnie chodzi mi o ta druga cześć bo w pierwszej nic nie bylo zastosowane jesli chodzi o przezroczystosc wiec tematu nie ma - ta czesc istnieje tylko jako mozliwosc porownania ...
Gdy zaś w drugiej cześci zastosowalem parametry umożliwiające osiągnięcie przezroczystości warstw divow :
-moz-opacity : 0.5;
opacity : 0.3;
filter : alpha(opacity=90);
jak widac ograniczona przezroczystosc do 0.3 umozliwia w cześci widocznosc tla strony - czyli efekt osiagnolem ale przy okazji uniemowliwia w cześci widoczność treści strony - chodzi mi o fakt mglistości zawartości strony;
chcę osiągnać możliwość widzenia tła strony przez przezroczyste divy przy jednoczesnym zachowaniu 100-procentowej widoczności zawartości strony;
wiem ze to chodzi o to ze jeden div zawarty jest w drugim i dlatego zacmiewa to przy okazji zawartosc strony ale nie wiem jak to zmienic ....
Marcin Fliszta

Marcin Fliszta Scrum Master

Temat: przezroczyste divy

Nie jestem ekspertem w przeźroczystościach i nie wiem czy dobre Cię zrozumiałem, bo jest dość późno... ale:

1. W definicji przeźroczystości podajesz jej różne wartości dla poszczególnych przeglądarek. Jak rozumiem korzystasz z FF, bo piszesz o "opacity: 0.3". Ale pozostałe powinny wtedy wyglądać:

filter: alpha(opacity=30); /* internet explorer */
-khtml-opacity: 0.3; /* khtml, old safari */
-moz-opacity: 0.3; /* mozilla, netscape */
opacity: 0.3; /* fx, safari, opera */


2. jeśli chcesz efektu jasnego tła i ciemnego tekstu, to ustaw opacity na np. 0.7 - tekst będzie czytelny a obrazek widoczny. Jeśli obrazek będzie pozostawiony dla 0.3 to mimo ciemnego tekstu może się on zlewać z tłem.
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: przezroczyste divy

Polecam żebyś zrobił sobie jedno-pikselowy półprzeźroczysty plik png (ustawiony np w PS i zapisany do publikacji WEB jako PNG24).

W css ustawiasz go na wypełnienie i tyle.
(dla IE6 stosujesz png fix - pełno tego w Googlach)

pozdro.
Jacek Z.

Jacek Z. Web Application
Developer

Temat: przezroczyste divy

Ivo Bogucki:
Polecam żebyś zrobił sobie jedno-pikselowy półprzeźroczysty plik png (ustawiony np w PS i zapisany do publikacji WEB jako PNG24).

pozdro.


Z jednopikselowymi bywają problemy w IE7 (być może również innych), ja stosuję zawsze 10x10.
Kamil Kłosowski

Kamil Kłosowski webdeveloper
limegarden.pl

Temat: przezroczyste divy

równie dobrze możesz skorzystać z rgba/hsla ->
background: rgba(#fff,#fff,#fff,0.1)

ostatnia wartość to opacity. tekst w tym wypadku nie będzie przezroczysty. jednak nie będzie hulać na ie6/7

a do ie najlepiej jak koledzy mówili - png, a dla ie6 pngfix (albo w ogóle zrezygnować z tej badziewiastej przeglądarki - jak oczywiście możesz ;) )
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: przezroczyste divy

Kamil Kłosowski:
równie dobrze możesz skorzystać z rgba/hsla ->
background: rgba(#fff,#fff,#fff,0.1)

A przypadkiem to nie jest CSS3? (ie7 i ie6 chyba tego nie odczytują)
Poprawcie mnie jeśli jestem w błędzie.
Kamil Kłosowski

Kamil Kłosowski webdeveloper
limegarden.pl

Temat: przezroczyste divy

Ivo Bogucki:
Kamil Kłosowski:
równie dobrze możesz skorzystać z rgba/hsla ->
background: rgba(#fff,#fff,#fff,0.1)

A przypadkiem to nie jest CSS3? (ie7 i ie6 chyba tego nie odczytują)
Poprawcie mnie jeśli jestem w błędzie.

jest, ale większość przeglądarek oprócz ie8> odczytują to poprawnie

link: http://css-tricks.com/rgba-browser-support/
Paweł Piskorz

Paweł Piskorz koder HTML/CSS

Temat: przezroczyste divy

Do badzIEwa polecam:
http://css3please.com/

Następna dyskusja:

IE6 i rozciągające się divy




Wyślij zaproszenie do