Rumah > Artikel > hujung hadapan web > Gunakan penapis CSS untuk mencipta imej atau teks kabur

Gunakan penapis CSS untuk mencipta imej atau teks kabur

PHPzke hadapan: 2023-08-26 22:01:021375semak imbas

使用 CSS 滤镜创建模糊的图片或文本

Motion blur digunakan untuk mencipta gambar atau teks kabur dengan arah dan intensiti. Parameter berikut boleh digunakan dalam penapis ini.

Betul atau salah. Jika benar, imej ditambah pada imej kabur jika palsu, imej tidak ditambah pada imej kabur.

Arah kabur, mengikut arah jam, dibulatkan kepada kenaikan 45 darjah. Nilai lalai ialah 270 (kiri). 0 = atas 90 = kanan 270 = kiri 315 = kiri atas

2	Arah
45 = kanan atas	135 = kanan bawah 180 = bawah 225 = bawah kiri
	3 Kekuatan Bilangan piksel yang kabur akan berkembang. Lalai ialah 5 piksel. Contoh Anda boleh cuba jalankan kod berikut untuk mengaburkan imej Demo langsung <html> <head> </head> <body> <img src = "/css/images/logo.png" alt="CSS Logo" style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials</div> </body> </html>

Arah

45 = kanan atas

135 = kanan bawah 180 = bawah

225 = bawah kiri

Kekuatan

Bilangan piksel yang kabur akan berkembang. Lalai ialah 5 piksel.

Contoh

Anda boleh cuba jalankan kod berikut untuk mengaburkan imej

Demo langsung

<html>
   <head>
   </head>
   <body>
      <img src = "/css/images/logo.png" alt="CSS Logo" style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
      <p>Text Example:</p>
      <div style="width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: blue;
         Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials</div>
   </body>
</html>

Atas ialah kandungan terperinci Gunakan penapis CSS untuk mencipta imej atau teks kabur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menetapkan lekukan baris kedua perenggan menggunakan CSS?Artikel seterusnya：Bagaimana untuk menetapkan lekukan baris kedua perenggan menggunakan CSS?

Artikel berkaitan

Lihat lagi