CSS blur() funktio

Määritelmä ja käyttö

CSS blur() Sivuston suodatusfunktiot soveltavat hämärtymisvaikutusta elementtiin. Arvojen kasvaessa hämärtymisvaikutus vahvistuu.

Jos arvoa ei määritetä, käytetään oletusarvoa 0.

Esimerkki

Esimerkki 1

Sovita erilaisia hämärtymisvaikutuksia <h1> ja <img> -elementeille:

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

Kokeile itse

Esimerkki 2

Luo hämärtynyt tausta:

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

Kokeile itse

CSS syntaksi

blur(radius)
Arvo Kuvaus
radius

Valinnainen. Määritä hämärtymisen säde. Arvojen kasvaessa hämärtymisvaikutus vahvistuu.

Jos arvoa ei määritetä, käytetään oletusarvoa 0 (ei vaikutusta).

Tekninen tarkistus

Versio: CSS Filter Effects Module Level 1

Selaimen tuki

Taulukossa olevat numerot viittaavat ensimmäiseen selaimen versioon, joka täysin tukee tätä funktiota.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Aiheeseen liittyvät sivut

Viittaukset:CSS suodatus ominaisuus

Viittaukset:CSS brightness() funktio

Viittaukset:CSS contrast() funktio

Viittaukset:CSS drop-shadow() funktio

Viittaukset:CSS grayscale() funktio

Viittaukset:CSS hue-rotate() funktio

Viittaukset:CSS invert() funktio

Viittaukset:CSS opacity() funktio

Viittaukset:CSS saturate() funktio

Viittaukset:CSS sepia() funktio