Rumah >hujung hadapan web >tutorial css >Bagaimana Mengekalkan Tepi Tajam Apabila Mengaburkan Imej dengan Penapis CSS3?
Bagaimana Mengekalkan Tepi Tajam Apabila Mengaburkan Imej dengan Penapis CSS3?
- DDDasal
- 2024-11-29 15:24:13708semak imbas
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
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="http://placekitten.com/300" /> </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!