Bentuk-gambar-ambang - Trik CSS

shape-image-thresholdProperti CSS mengatur piksel mana yang disertakan dalam bentuk gambar ketika shape-outsidedigunakan untuk menentukan area float dari elemen CSS.

Katakanlah kita menggunakan gradien linier untuk menentukan area float dari bentuk CSS. Sesuatu seperti ini di mana kita beralih dari warna solid menjadi transparan pada sudut 45 °:

Biasanya, kami akan mendefinisikan itu sebagai background-imagedari sebuah elemen. Jika kita mengapungkan elemen ini dan menjatuhkan beberapa konten di sebelahnya, gradien dan konten akan duduk berdampingan.

Tetapi jika kita menukar background-imageuntuk shape-outside, kita tidak lagi melihat gradien, tapi membungkus konten di sekitarnya di mana piksel dalam gradien transparan.

Tapi katakanlah kita berpikir teks perlu memeluk bentuknya sedikit lebih dekat. Di situlah kita bisa meraih shape-image-threshold. Kita dapat menggunakannya untuk menyesuaikan di mana konten secara alami membungkus piksel transparan dengan menyertakan piksel yang semi transparan. Misalnya, shape-image-thresholdnilai .3 akan menyertakan piksel yang buram lebih dari 30% di area float bentuk.

Kali ini, kami akan menyertakan gradien untuk melihat cara kerjanya.

Lihat itu? Dengan mendeklarasikan shape-image-thresholdbentuk kedua dan menyetelnya ke nilai .15, kami telah menyertakan piksel yang lebih besar dari 15% buram di area float, memungkinkan konten untuk tumpang tindih dengan bentuk smidge.

Ini juga berfungsi saat kita mendefinisikan bentuk luar dengan file gambar aktual yang menggunakan transparansi. Kesepakatan yang sama, hanya bentuk yang berbeda untuk dikerjakan.

Sintaksis

.logo ( shape-outside: url(/path/to/image.png.webp); shape-image-threshold: .6; )

Berlaku untuk: floats
Diwariskan: tidak
Nilai awal: 0.0
Jenis animasi: angka

Nilai

The shape-image-thresholdproperti menerima nilai alpha tunggal antara 0 dan 1, di mana 0 adalah setara dengan tingkat opacity 0% (sepenuhnya transparan) dan 1 adalah setara dengan tingkat opacity dari 100% (tidak ada transparansi). Nilai awalnya adalah 0,0.