Projekt strony i jej dialog z odwiedzającym mogą być skutecznie realizowane poprzez efekt przejrzystości. Zasada krycia CSS pozwala ustawić przezroczystość zawartości znacznika z 0 na 1, tj. Z pełnej przezroczystości na pełną nieprzezroczystość.

Zasadniczo przejrzystość jest prostokątna. Ale jeśli używasz regułę: background-color: transparent i tworzą obraz (np formacie * .png), inne niż prostokątne, można osiągnąć prawie żadnego wpływu.

stanowi składni przejrzystości

Stosując wzorem: nieprzezroczystość: 0,4 - w opisie styl lub klasa ma przejrzystość identyfikatorem znacznika, do których są one stosowane, 40%. Wartość stylu przejrzystości spisanych numerach od 0 do 1. Dolna granica oznacza pełną przejrzystość, że tag nie będzie widać, a górna granica - kompletny brak przejrzystości, że nie widać wszystko pod znacznikiem.

Pamiętaj, że zasada krycia CSS działa zarówno na tle (kolor, obraz), jak i na ramce i tekście w tagu. Dlatego projektując szczególny dialog zaleca się dzielić swoje poparcie dla tekstu na nim (tworząc różne style tych elementów) lub wybrać takie kolory, które wyglądają dobrze na tle strony na wybranym poziomie przejrzystości.

Widoczność przezroczystego elementu

Nawet jeśli przezroczystość wynosi zero, to znaczy element jest niewidoczny, jest obecny w oknie przeglądarki i może generować zdarzenia. W tym przypadku na obrazku z truskawką umieszcza się znaczek w kształcie koła z motylem, a w nim znacznik z tekstem Click Me! PrzejrzystośćZnacznik z motylem wynosi 0,5 a tekst 1 oznacza, że ​​tekst jest całkowicie nieprzejrzysty. Jeśli procedura obsługi zdarzenia zestaw znaczników tekstu, na przykład, onclick, to jaki byłby poziom przejrzystości nie było w tym tagu, kliknij na jego miejscu zawsze działa.

Stosowanie zasad przejrzystości

Logika stosowania zasad przejrzystości w klasycznym jak CSS tle, krycie = 0,3 - 0,5: okna wiadomość lub okna wyskakuje nad ogólnym tle strony, po prostu pokrycie go, a dialog z gościem. Ta praktyka stała się powszechna, że ​​strona bez takiej funkcjonalności nie jest już uważana za nowoczesną.

Tymczasem w zasadach przejrzystości istnieją inne obszary zastosowania. Przede wszystkim ta animacja: zarówno przy pomocy reguł CSS, jak i zarządzanego javascriptu. Pierwsza opcja to korzystne, na przykład, zmieniając krycie CSS Rekrutacja @keyframes, używany w animacji reguła CSS, można szybko i sprawnie wykonać przycisk menu animacji, logo firmy, innej zawartości strony Zawartość Tag. Używanie różnych poziomów przezroczystości w tagach, które są nałożone na siebie, umożliwi tworzenie oryginalnych efektów wizualnych. Niestety, przejrzystość na urządzeniach, które nie obsługują mysz, nie ujawnił kilka ciekawych pomysłów wizualnych, ale jeśli używasz CSS krycie zwykle opóźniony, ruch palców na ekranie smartfonu, na przykład, może być reaktywowana w nieoczekiwany sposób.