Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menetapkan kesan kabur Gaussian dalam css

Bagaimana untuk menetapkan kesan kabur Gaussian dalam css

WBOYasal: 2021-11-30 18:30:459227semak imbas

Dalam CSS, anda boleh menggunakan atribut penapis dan fungsi blur() untuk mencapai kesan kabur Gaussian Atribut penapis digunakan untuk menetapkan kesan visual elemen imej untuk tambahkan kesan kabur Gaussian pada elemen imej , sintaksnya ialah "elemen gambar {filter:blur(blur value);}".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara menetapkan kesan kabur Gaussian dalam css

Kita boleh menetapkan kabur Gaussian kepada imej melalui atribut penapis mentakrifkan elemen ( Biasanya kesan visual (cth. kabur dan tepu) Bagaimana untuk menetapkan kesan kabur Gaussian dalam css ).

Apabila nilai atribut ialah blur(px), tetapkan Gaussian blur kepada imej. Nilai "jejari" menetapkan sisihan piawai fungsi Gaussian, atau berapa banyak piksel yang digabungkan bersama pada skrin, jadi semakin besar nilainya, semakin kaburnya; lalai ialah 0; parameter ini boleh Tetapkan nilai panjang css, tetapi tidak menerima nilai peratusan.

Mari kita lihat contoh di bawah:

Hasil output:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
.img1 {
    filter: blur(5px);
}
    </style>
  <img  src="1118.02.png" class="img1" alt="Bagaimana untuk menetapkan kesan kabur Gaussian dalam css" >
  <img  src="1118.02.png" class="img2" alt="Bagaimana untuk menetapkan kesan kabur Gaussian dalam css" >
</body>
</html>

Bagaimana untuk menetapkan kesan kabur Gaussian dalam css (Perkongsian video pembelajaran:

Tutorial video css

)

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kesan kabur Gaussian dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk menambah teks pada gambar dengan cssArtikel seterusnya：Bagaimana untuk menambah teks pada gambar dengan css

Artikel berkaitan

Lihat lagi