Şekil-görüntü-eşiği - CSS Hileleri

CSS shape-image-thresholdözelliği shape-outside, bir CSS öğesinin kayan alanını tanımlamak için kullanıldığında görüntünün şekline hangi piksellerin dahil edileceğini ayarlar .

Bir CSS şeklinin kayan alanını tanımlamak için doğrusal bir gradyan kullandığımızı varsayalım. Tek renkten şeffafa 45 ° açıyla gittiğimizde böyle bir şey:

Normalde, bunu background-imagebir elementin olarak tanımlarız . Bu öğeyi yüzer ve yanına bir miktar içerik bırakırsak, gradyan ve içerik yan yana oturur.

Biz takas Ama eğer background-imageiçin shape-outside, artık gradyan, ama gradyan piksel şeffaf etrafında içerik dürüm göreceksiniz.

Ama diyelim ki metnin şekle biraz daha yakın olması gerektiğini düşünüyoruz. Ulaşabileceğimiz yer orası shape-image-threshold. Yarı saydam pikseller ekleyerek içeriğin saydam piksellerin etrafını doğal olarak nereye saracağını ayarlamak için kullanabiliriz. Örneğin, 3 shape-image-thresholddeğeri, şeklin kayan alanında% 30'dan fazla opak olan pikselleri içerecektir.

Bu sefer, bunun nasıl çalıştığını görmek için gradyanı ekleyeceğiz.

Gördün mü? shape-image-thresholdİkinci şekli bildirerek ve onu 0,15 değerine ayarlayarak, kayan alana% 15'ten fazla opak olan pikseller ekledik ve bu da içeriğin şeklin biraz üst üste binmesine izin verdi.

Bu ayrıca, dış şekli şeffaflık kullanan gerçek bir görüntü dosyasıyla tanımladığımızda da işe yarar. Aynı anlaşma, sadece çalışmak için farklı bir şekil.

Sözdizimi

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

Şunlar için geçerlidir: yüzer
Devralındı: hayır
Başlangıç değeri: 0.0
Animasyon türü: sayı

Değerler

shape-image-thresholdÖzelliği 0% 0 bir opaklık seviyesinin eşdeğerdir, 0 ile 1 arasında, tek bir alfa değeri (tamamen şeffaf) ve 1,% 100 (saydamlık) bir opaklık seviyesinde eşdeğer kabul edilmektedir. Başlangıç değeri 0.0'dır.