Gunakan penapis CSS untuk mencipta imej atau teks kabur-tutorial css-php.cn

Gunakan penapis CSS untuk mencipta imej atau teks kabur

PHPz

Lepaskan： 2023-08-26 22:01:02

ke hadapan

1441 orang telah melayarinya

使用 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> Salin selepas log masuk

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>

Salin selepas log masuk

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!