Hvordan oprettes: Tilføj billedeffekter

Lær hvordan man tilføjer visuelle effekter til billeder.

billedfiltre

Prøv det selv

CSS Filters

CSS filter egenskab tilføjer visuelle effekter til elementer (som blødgøring og farvesaturation).

Bemærk:Internet Explorer, Edge 12 eller Safari 5.1 og ældre versioner understøtter ikke filter egenskab.

gråtone eksempel

Skift farverne på alle billeder til sort/hvid (100% gråtone):

Tulip
original billede
Tulip
gråtone (100%)
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Prøv det selv

blødgøring eksempel

Anvend blødgøring på alle billeder:

Tulip
original billede
Tulip
blødgøring (5 pixel)
img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Prøv det selv

Relaterede sider

Reference håndbog:CSS filter egenskab