Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menambah kesan lapisan kabur pada imej menggunakan css

Bagaimana untuk menambah kesan lapisan kabur pada imej menggunakan css

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal: 2021-12-10 11:35:145799semak imbas

Dalam CSS, anda boleh menggunakan atribut penapis untuk menambah kesan lapisan kabur pada imej Fungsi atribut ini adalah untuk menetapkan kesan visual elemen apabila atribut ini digunakan bersama dengan "blur ()", anda boleh menambah kesan lapisan kabur pada imej. Tambah kesan kabur, sintaksnya ialah "elemen gambar {filter:blur(blur value px);}".

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

Cara menambah kesan lapisan kabur pada imej menggunakan css

Dalam css, jika anda ingin menambah kesan lapisan kabur pada imej, anda perlu gunakan Atribut penapis digunakan untuk menentukan kesan visual elemen (biasanya Bagaimana untuk menambah kesan lapisan kabur pada imej menggunakan 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.

Contohnya seperti berikut:

Hasil keluaran:

<!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(2px);
}
    </style>
  设置了模糊效果：<br><img  src="1118.01.png" class="img1" alt="Bagaimana untuk menambah kesan lapisan kabur pada imej menggunakan css" ><br>
  没设置模糊效果：<br><img  src="1118.01.png" class="img2" alt="Bagaimana untuk menambah kesan lapisan kabur pada imej menggunakan css" >
</body>
</html>

Bagaimana untuk menambah kesan lapisan kabur pada imej menggunakan css Jika berminat, boleh teruskan untuk melawat:

tutorial video css

Atas ialah kandungan terperinci Bagaimana untuk menambah kesan lapisan kabur pada imej menggunakan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 Filter

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：Berkongsi 20 gaya susun atur halaman utama yang popular, sentiasa ada satu yang sesuai dengan anda!Artikel seterusnya：Berkongsi 20 gaya susun atur halaman utama yang popular, sentiasa ada satu yang sesuai dengan anda!

Artikel berkaitan

Lihat lagi