Fungsi blur() CSS

Definisi dan penggunaan

Fungsi blur CSS blur() Fungsi filter menambahkan kesan blur kepada elemen. Nombor yang lebih besar, kesan blur yang lebih kuat.

Jika nilai tidak disifatkan, pilihan baku adalah 0.

Contoh

Contoh 1

Aplikasikan kesan blur yang berbeza untuk elemen <h1> dan <img>:

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

Cuba sendiri

Contoh 2

Cipta latar belakang blur:

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

Cuba sendiri

Syarat CSS

blur(radius)

Perincian teknikal

Pendukung pelayar

Nombor di dalam tabel menunjukkan versi pemeroleh penuh fungsi ini.

Halaman yang berkenaan

Rujukan:Sifat filter CSS

Rujukan:Fungsi brightness() CSS

Rujukan:Fungsi contrast() CSS

Rujukan:Fungsi drop-shadow() CSS

Rujukan:Fungsi grayscale() CSS

Rujukan:Fungsi hue-rotate() CSS

Rujukan:Fungsi invert() CSS

Rujukan:Fungsi opacity() CSS

Rujukan:Fungsi saturate() CSS

Rujukan:Fungsi sepia() CSS