Beranda>Tutorial Desain Web>Tutorial CSS

CSS menggunakan filter dan filter latar belakang untuk mencapai efek Gaussian blur (kode contoh)

Penulis：Eve Cole Waktu Pembaruan：2024-12-20 16:54:18

latar belakang

Saya menerima permintaan hari ini untuk menggunakan efek Gaussian blur untuk mengaburkan halaman. Saya baru saja mengambil kesempatan ini untuk memilah dua API Gaussian blur di CSS3.

Pengenalan API

menyaring

menjelaskan:
API ini adalah filter yang tidak hanya dapat menghasilkan Gaussian blur, tetapi juga banyak hal lainnya seperti offset warna, saturasi, skala abu-abu, dll.

tata bahasa:

 // Gunakan spasi untuk memisahkan beberapa filter filter: tidak ada;
//Filter blur Gaussian: blur(4px);
//Filter kecerahan linier: kecerahan();
// Filter kontras: kontras();
// Filter efek bayangan: drop-shadow();
//Filter skala abu-abu: skala abu-abu();
// Filter rotasi rona: rona-putar();
//Balikkan filter gambar: invert();
//Konversi filter transparansi: opacity();
// Filter saturasi: jenuh();
// filter coklat: sepia();
// Filter penyaring SVG: url();

Diantaranya filter: blur();

filter latar belakang

menjelaskan:
Saat Anda membuat elemen dan menambahkan atribut ini, efek (seperti buram atau perubahan warna) akan ditambahkan ke area di belakang elemen.

kontras:
Atribut filter harus dimuat pada gambar atau gambar latar belakang, sedangkan background-filter hanya perlu berupa elemen.

tata bahasa:

 filter latar belakang: blur(2px);
filter latar belakang: kecerahan (60%);
filter latar belakang: kontras(40%);
filter latar belakang: drop-shadow(4px 4px 10px biru);
filter latar belakang: skala abu-abu (30%);
filter latar belakang: putaran warna (120 derajat);
filter latar belakang: invert(70%);
filter latar belakang: opacity(20%);
filter latar belakang: sepia(90%);
filter latar belakang: jenuh(80%);

Contoh

menyaring contoh satu

 <!DOCTYPEhtml>
<htmllang="id">
  <kepala>
    <gaya>
      .wrapBox2 {
        lebar: 800 piksel;
        tinggi: 300 piksel;
        meluap: tersembunyi;
        posisi: relatif;
        gambar latar belakang: url("./win.jpeg");
        ukuran latar belakang: 100% 100%;
        pengulangan latar belakang: tidak ada pengulangan;
        filter: kabur(10 piksel);
      }
      .subKotak {
        posisi: mutlak;
        lebar: kalk(100% - 100 piksel);
        tinggi: kalk(100% - 100px);
        indeks-z: 2;
      }
      .teks {
        posisi: relatif;
        /* indeks-z: 10; */
        ukuran font: 40px;
        berat font: tebal;
        warna: #f00;
      }
    </gaya>
  </kepala>
  <tubuh>
    <div kelas="wrapBox2">
      <div kelas="subKotak"></div>
      <div class="text">Blur semua</div>
    </div>
  </tubuh>
</html>

Satu hal yang perlu diperhatikan di sini adalah setelah menambahkan blur, ukuran sebenarnya akan melebihi lebar dan tinggi yang kita atur karena efek duri di sekitarnya. Anda dapat membungkus lapisan di luar dan mengatur overflow: hidden;

menyaring contoh dua

 <!DOCTYPEhtml>
<htmllang="id">
  <kepala>
    <gaya>
      .wrapBox2 {
        lebar: 800 piksel;
        tinggi: 300 piksel;
        /* meluap: tersembunyi; */
        posisi: relatif;
      }
      .subKotak {
        lebar: 100%;
        tinggi: 100%;
        posisi: mutlak;
        lebar: kalk(100% - 100 piksel);
        tinggi: kalk(100% - 100 piksel);
        indeks-z: 2;
        filter: kabur(10 piksel);
      }
      .teks {
        posisi: relatif;
        /* indeks-z: 10; */
        ukuran font: 40px;
        berat font: tebal;
        warna: #f00;
      }
    </gaya>
  </kepala>
  <tubuh>
    <div kelas="wrapBox2">
      <img src="./win.jpeg" class="subBox" />
      <div class="text">Blur semua</div>
    </div>
  </tubuh>
</html>

Dengan cara ini, karena teks dan gambar berada pada level yang sama, teks berada di bawah gambar atau di atas gambar (dikontrol berdasarkan indeks-z) tanpa mengaburkan teks.

contoh filter latar belakang 1

 <!DOCTYPEhtml>
<htmllang="id">
  <kepala>
    <gaya>
      .wrapBox2 {
        lebar: 800 piksel;
        tinggi: 300 piksel;
        meluap: tersembunyi;
        posisi: relatif;
        gambar latar belakang: url("./win.jpeg");
        ukuran latar belakang: 100% 100%;
        pengulangan latar belakang: tidak ada pengulangan;
      }
      .subKotak {
        posisi: mutlak;
        lebar: kalk(100% - 100 piksel);
        tinggi: kalk(100% - 100px);
        indeks-z: 2;
        filter latar belakang: blur(10px);
        /* atas: 100 piksel; */
      }
      .teks {
        posisi: relatif;
        /* indeks-z: 10; */
        ukuran font: 40px;
        berat font: tebal;
        warna: #f00;
      }
    </gaya>
  </kepala>
  <tubuh>
    <div kelas="wrapBox2">
      <div kelas="subKotak"></div>
      <div class="text">Buram sebagian</div>
    </div>
  </tubuh>
</html>

Seperti yang Anda lihat, atribut background-filter tidak perlu disetel pada elemen gambar, tetapi pada elemen apa pun menurut saya metode ini lebih fleksibel.

Meringkaskan

Jika Anda hanya ingin memburamkan gambar, Anda bisa langsung menggunakan filter. Jika Anda ingin menutupi bagian tertentu dari halaman/gambar html dengan lapisan blur, gunakan filter latar belakang.

Tentu saja, menggunakan filter latar belakang juga dapat memenuhi skenario pertama.

Demikianlah artikel kali ini tentang penggunaan CSS filter dan background-filter untuk mencapai efek Gaussian blur (contoh kode). Untuk konten CSS Gaussian blur lainnya, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait di bawah ini, semoga Anda akan lebih mendukung downcodes.com di masa mendatang!

Artikel Terkait