Bentuk-gambar-ambang - Trik CSS

Properti CSS shape-image-thresholdmenetapkan piksel mana yang termasuk dalam bentuk gambar ketika shape-outsidedigunakan untuk menentukan kawasan apungan elemen CSS.

Katakan kita menggunakan kecerunan linier untuk menentukan kawasan apungan bentuk CSS. Sesuatu seperti ini di mana kita pergi dari warna padat hingga telus pada sudut 45 °:

Biasanya, kita akan mendefinisikannya sebagai background-imageelemen. Sekiranya kita mengapung elemen ini dan menjatuhkan beberapa kandungan di sebelahnya, kecerunan dan kandungan akan duduk bersebelahan.

Tetapi jika kita menukar background-imageuntuk shape-outside, kita tidak lagi akan melihat kecerunan, tetapi balutan kandungan di sekitarnya di mana piksel dalam kecerunan telus.

Tetapi katakanlah bahawa teks itu perlu dipeluk lebih dekat. Di situlah kita boleh menjangkau shape-image-threshold. Kita dapat menggunakannya untuk menyesuaikan tempat kandungan secara semula jadi merangkumi piksel lutsinar dengan memasukkan piksel separa telus. Sebagai contoh, shape-image-thresholdnilai .3 akan merangkumi piksel yang lebih daripada 30% legap di kawasan apungan bentuk.

Kali ini, kami akan memasukkan kecerunan untuk melihat bagaimana ini berfungsi.

Lihat itu? Dengan menyatakan shape-image-thresholdbentuk kedua dan menetapkannya ke nilai 0,15, kami telah memasukkan piksel yang lebih besar daripada 15% legap di kawasan apungan, yang memungkinkan kandungannya bertindih bentuknya.

Ini juga berfungsi ketika kita menentukan bentuk luar dengan fail gambar sebenar yang menggunakan ketelusan. Kesepakatan yang sama, hanya bentuk yang berbeza untuk dikendalikan.

Sintaks

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

Berlaku untuk: apungan
Diwarisi: tidak
Nilai awal: 0.0
Jenis animasi: nombor

Nilai

The shape-image-thresholdharta menerima nilai alpha tunggal antara 0 dan 1, di mana 0 adalah sama dengan tahap kelegapan 0% (telus) dan 1 adalah sama dengan tahap kelegapan 100% (tidak telus). Nilai awal ialah 0.0.