Jak to zrobić — dodać efekty obrazu
Dowiedz się, jak dodawać efekty wizualne do obrazów.
Filtry obrazu
Filtry CSS
Właściwość CSS filter
dodaje efekty wizualne (takie jak rozmycie i nasycenie) do elementu.
Uwaga: Właściwość filtra nie jest obsługiwana w przeglądarce Internet Explorer, Edge 12, Safari 5.1 i wcześniejszych.
Przykład w skali szarości
Zmień kolor wszystkich obrazów na czarno-biały (100% szarości):
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Przykład rozmycia
Zastosuj efekt rozmycia do wszystkich obrazów:
img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
Original image
blur(5px)
Przejdź do naszej właściwości filtrów CSS , aby dowiedzieć się więcej o filtrach CSS.