Bolehkah Anda Mengaburkan Imej Sambil Mengekalkan Tepinya Tajam?

Tepi Ditentukan dengan Latar Belakang Kabur Penapis CSS3

Imej kabur menambahkan sentuhan kelembutan dan kedalaman, tetapi ia sering menjejaskan ketajaman tepi. Bolehkah kita mencapai kesan kabur sambil mengekalkan garis besar yang jelas?

Penyelesaian: Div dengan Limpahan dan Negatif Margin

CSS:

div {
  overflow: hidden;
}

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

HTML:

<div><img src="image.jpg" /></div>

Penyelesaian ini meletakkan imej kabur dalam div dengan limpahan tersembunyi. Dengan menetapkan jidar negatif pada imej, kami mengimbanginya dalam div, mendedahkan tepi asal yang tidak kabur.

Demo:

[Imej imej kabur dengan tepi yang ditentukan ]

Bagaimana ia Berfungsi:

• Div menghalang imej kabur daripada tumpah melampaui sempadannya.
• Jidar negatif menolak imej sedikit ke dalam, mendedahkan bahagian luar yang tidak kabur.
• Penapis kabur digunakan pada imej, menambah kedalaman sambil meninggalkan tepi utuh.

Teknik ini mensimulasikan kesan "kabur sisipan" dengan berkesan, memberikan gabungan kekaburan dan ketajaman yang diingini.

Atas ialah kandungan terperinci Bolehkah Anda Mengaburkan Imej Sambil Mengekalkan Tepinya Tajam?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!