Bagaimana Mengekalkan Tepi Tajam Apabila Mengaburkan Imej dengan Penapis CSS3?-tutorial css-php.cn

Bagaimana Mengekalkan Tepi Tajam Apabila Mengaburkan Imej dengan Penapis CSS3?

DDD

Lepaskan： 2024-11-29 15:24:13

asal

628 orang telah melayarinya

How to Keep Edges Sharp When Blurring an Image with CSS3 Filter?

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;
}

Salin selepas log masuk

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="http://placekitten.com/300" />
</div>

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Mengapakah `.foo a:link` Mengatasi `a:hover` dalam Kekhususan CSS? Artikel seterusnya：Bagaimana untuk Menghalang Barangan Flexbox daripada Meregangkan untuk Mengisi Ruang Sedia?

Kenyataan Laman Web ini

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 terbaru oleh pengarang