Przezroczystość jest jedną z pierwszych nowości, które zostały szybko wprowadzone w większości przeglądarek. Własność ta umożliwia zmianę widoczności elementu, tak aby był on całkowicie niewidoczny (lub widoczny), albo częściowo przezroczysty. Niestety stało się tak jak zawsze, ponieważ własność ta nie jest interpretowana przez wszystkie przeglądarki jednakowo. Wyłamał się Internet Explorer, który zamiast standardowej składni, używa własności filter, podczas gdy reszta przeglądarek – Webkit (Chrome, Safari), Mozilla – obsługują standard zatwierdzony przez W3C, a mianowicie opacity. Na szczęście dla nas, IE ignoruje użycie standardowego kodu, przez co możemy deklarować przezroczystość, korzystając z obu metod.
Ustawianie przezroczystości – Internet Explorer (do wersji 8 – włącznie)
Aby to zrobić, należy dodać do arkusza, dla wybranego przez nas elementu, własność filter, oraz zastosować odpowiednie parametry, np:
1 2 3 | img { filter: alpha(opacity=60); } |
W przypadki przeglądarki Microsoftu musimy użyć wbudowanego filtra alpha(). Zmieniać możemy tu wartość liczbową, podaną za znakiem równości, z przedziału od 0 (pełna przezroczystość) do 100 (brak przezroczystości).
Ustawianie przezroczystości – Webkit, Mozilla i Internet Explorer (od wersji 9)
Tutaj sprawa wygląda dużo prościej. Korzystamy z własności opacity, z parametrem przezroczystości.
1 2 3 | img { opacity: 0.6; } |
Wartość parametru, w tym przypadku zawierać się musi w przedziale od 0.0 (pełna przezroczystość) do 1.0 (brak przezroczystości). Jak zawsze, możemy użyć tu słowa interhit, które spowoduje przejęcie ustawień z elementu nadrzędnego. Warto zauważyć, że jeśli element nadrzędny (rodzic) ma przezroczystość ustawioną na 0.25, to po użyciu słowa kluczowego interhit, przezroczystość potomka zmniejszy się o 25% w stosunku do 25-procentowej przezroczystości rodzica.
Wartości, dla własności opacity, mnożą się, jeśli przezroczystość ustawiamy w elemencie nadrzędnym, jak i dziecku. Dla przykładu, jeśli rodzić posiada opacity ustawione na 0.25, a dziecko na 0.5, to po wyliczeniu wartość elementu „wewnątrz” wyniesie 0.125.
Kiedy użyjemy własności przezroczystości, to jego zastosowanie obejmie wszystkie elementy, które znajdują się wewnątrz. Nie mamy możliwości zmiany tego ustawienia.
