HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
Jeśli wejdziecie np. na http://www.gazeta.pl zawsze na pierwszej stronie u góry jest tam zdjęcie, a w nim/ na nim, przezroczysty kwadrat po prawej stronie tego zdjęcia z czytelnymi napisami.
Jedynie co mi wyszło, to takie coś: http://www.toya.net.pl/~cachaito
Rozwiązanie takie ma jednak dwie duże wady:
- tekst na obrazku jest przezroczysty tak samo jak tło boxu
- rozwiązanie takie, wymaga za każdym razem tworzenia klasy dla każdego obrazka osobno. Wymarzonym rozwiązaniem byłoba jedna klasa odpowiedzialna za przezroczysty box, którą można by dołączyć do poszczególnych obrazków
To wcale nie jest takie trudne jak się wydaje. Według mnie najprościej jest zrobić tak:
1. W HTML wstawiasz normalnie obrazek, a pod nim div z jakąś klasą.
2. W JS pobierasz szerokość obrazka i przypisujesz temu div'owi.
3. W CSS ustawiasz przeźroczystość itd...
Sposoby są różne.
1. Robisz sobie półprzeźroczysty PNG i wsadzasz go jako tło żeby odstawiał tą półprzeźroczystość na zdjęciu. Na niego tekst i po sprawie.
2. Wsadzasz DIV z tekstem na zdjęcie z odpowiednią szerokością tylko.
3. Stosujesz filtr dla IE gdyż ten ma problem z PNG a dokładnie z przeźroczystością (IE 6 i starsze).
Jak ? No nie będe Cie uczył podstaw HTML'a. PNG zrobić w GIMP'ie czy Photoshopie to nie problem. DIV z tłem chyba potrafisz zrobić a jak nie to poszukaj sobie w google (wpisujesz, dostajesz):
Dla pliku png:
TRANSPARENT PNG / PRZEŹROCZYSTOŚĆ PNG
Dla tła DIV:
CSS BACKGROUND
Dla filtru:
PNG TRANSPARENT BUG IN IE
Zawsze mówiłem że jeżeli wiemy jak nazwać to czego szukamy to Google naszym przyjacielem jest...
