Bagaimana Mengekalkan Tepi Tajam Apabila Mengaburkan Imej dengan Penapis CSS3?

Mengekalkan Tepi Ditentukan dengan Kabur Penapis CSS3

Apabila menggunakan penapis: blur() sifat pada imej menggunakan CSS3, bahagian tepi imej juga boleh menjadi kabur. Ini mungkin tidak diingini jika anda ingin mengekalkan tepi tajam sambil mengaburkan seluruh imej.

Penyelesaian: Margin Negatif dengan Limpahan Tersembunyi

Untuk mencapai tepi tajam sambil mengaburkan imej, anda boleh melampirkannya dalam

dan gunakan margin negatif pada unsur. Teknik ini melibatkan limpahan tetapan: tersembunyi; pada

, yang mengekalkan imej kabur dalam sempadannya:

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  margin: -5px -10px -10px -5px;
}

div {
  overflow: hidden;
}

Pendekatan ini menghasilkan output di mana tepi imej kekal tajam manakala imej yang lain kabur . Margin negatif pada elemen bertindak sebagai "zon penampan" di sekeliling imej, memastikan kesan kabur tidak melangkaui sempadan tersebut.

Demo:

[Imej anak kucing dengan tepi tajam dan latar belakang kabur]

HTML:

<div>
  <img  src="/static/imghwm/default1.png" data-src="http://placekitten.com/300" class="lazy" alt="Bagaimana Mengekalkan Tepi Tajam Apabila Mengaburkan Imej dengan Penapis CSS3?" >
</div>

Atas ialah kandungan terperinci Bagaimana Mengekalkan Tepi Tajam Apabila Mengaburkan Imej dengan Penapis CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!