Przejdź do treści

Filtry

Przezroczystość

selektor { filter: Alpha(Opacity=nieprzezroczystość, FinishOpacity=koniec, Style=styl, StartX=xp, StartY=yp, FinishX=xk, FinishY=yk) }
gdzie selektor oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).

Natomiast inne wyrazy oznaczają:
nieprzezroczystość
Poziom nieprzezroczystości (0 - przezroczysty; 100 - nieprzezroczysty - domyślnie)
koniec
(opcjonalnie) przezroczystość końcowa (0 - przezroczysty, 100 - nieprzezroczysty)
styl
Charakterystyczny kształt przezroczystości:
  • 0 - jednolity (domyślnie)
  • 1 - liniowy
  • 2 - promieniowy
  • 3 - prostokątny
xp, yp
Współrzędna pozioma i pionowa początku obszaru przezroczystości
xk, yk
Współrzędna pozioma i pionowa końca przezroczystości

Przykład:

filter: Alpha(Opacity=50, Style=0) filter: Alpha(Opacity=50, Style=0)
filter: Alpha(Style=1) filter: Alpha(Style=1)
filter: Alpha(Style=2) filter: Alpha(Style=2)
filter: Alpha(Style=3) filter: Alpha(Style=3)


height: 1em; filter: Alpha(Opacity=50)


Poniżej interesujący efekt z użyciem pozycjonowania:

Tekst przykryty półprzezroczystym obrazkiem

filter: Alpha(Opacity=50)

Dynamiczna zmiana filtrów graficznych

Oto ciekawy przykład dynamicznej zmiany filtru graficznego za pomocą DHTML (wskaż poniższy obrazek myszką):

filter: Alpha(Opacity=50)

Aby uzyskać taki efekt, należy wpisać:

<img src="obrazek.jpg" alt="..." style="filter: alpha(opacity=50)" onmouseover="this.style.filter=''" onmouseout="this.style.filter='alpha(opacity=50)'" />

Możliwa jest również kolejność odwrotna:

Alpha(Opacity=50)

<img src="obrazek.jpg" alt="..." onmouseover="this.style.filter='alpha(opacity=50)'" onmouseout="this.style.filter=''" />

Atrybut style="filter: ..." określa początkowe ustawienie filtru; onmouseover="this.style.filter='...'" podaje zmianę po wskazaniu myszką; natomiast onmouseout="this.style.filter='...'" wywołuje powrót do ustawień początkowych po usunięciu wskaźnika myszy znad elementu [zobacz także: Zdarzenia].

Identyczna składnia obowiązuje dla pozostałych filtrów, przedstawionych na tej stronie. W ten sam sposób można również dynamicznie zmieniać inne deklaracje stylów - wtedy zamiast this.style.filter wpisujemy: this.style.cecha, gdzie cecha określa wybraną własność stylów, a po znaku równości (pomiędzy apostrofami) wpisujemy żądaną wartość atrybutu, np. this.style.color='red'
UWAGA! Dotyczy to MSIE 4.0+

Komentarze

Zobacz więcej komentarzy