Odbicie obrazu CSS
W tym rozdziale dowiesz się, jak odzwierciedlić obraz.
Odbicia obrazu CSS
Właściwość box-reflect
służy do tworzenia odbicia obrazu.
Wartością box-reflect
właściwości może być: below
, above
,
left
lub right
.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Liczby, po których następuje -webkit- określają pierwszą wersję, która działała z przedrostkiem.
Property | |||||
---|---|---|---|---|---|
box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
Przykłady
Przykład
Tutaj chcemy odbicie pod obrazem:
img {
-webkit-box-reflect: below;
}
Przykład
Tutaj chcemy odbicie po prawej stronie obrazu:
img {
-webkit-box-reflect: right;
}
Przesunięcie odbicia CSS
Aby określić przerwę między obrazem a odbiciem, dodaj rozmiar przerwy do box-reflect
właściwości.
Przykład
Tutaj chcemy odbicie pod obrazem, z przesunięciem 20px:
img {
-webkit-box-reflect: below 20px;
}
Odbicie CSS z gradientem
Możemy również stworzyć efekt ściemniania na odbiciu.
Przykład
Stwórz efekt ściemniania na odbiciu:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}