Jak na to – Přidat obrazové efekty
Naučte se přidávat k obrázkům vizuální efekty.
Obrazové filtry
CSS filtry
Vlastnost CSS filter
přidává do prvku vizuální efekty (jako je rozostření a sytost).
Poznámka: Vlastnost filtru není podporována v Internet Exploreru, Edge 12 nebo Safari 5.1 a starších verzích.
Příklad ve stupních šedi
Změňte barvu všech obrázků na černou a bílou (100% šedá):
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Příklad rozostření
Použijte efekt rozostření na všechny snímky:
img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
Original image
blur(5px)
Přejděte na naši vlastnost filtru CSS , kde se dozvíte více o filtrech CSS.