Rumah > hujung hadapan web > tutorial css > Bolehkah Anda Mengaburkan Imej Sambil Mengekalkan Tepinya Tajam?

Bolehkah Anda Mengaburkan Imej Sambil Mengekalkan Tepinya Tajam?

Barbara Streisand
Lepaskan: 2024-11-25 21:23:13
asal
324 orang telah melayarinya

Can You Blur an Image While Keeping Its Edges Sharp?

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;
}
Salin selepas log masuk

HTML:

<div><img src="image.jpg" /></div>
Salin selepas log masuk

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!

sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan