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) ).
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>
(Perkongsian video pembelajaran:
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
