Próg kształtu obrazu - CSS-Tricks

Właściwość CSS shape-image-thresholdokreśla, które piksele są uwzględniane w kształcie obrazu, gdy shape-outsidejest używana do zdefiniowania swobodnego obszaru elementu CSS.

Powiedzmy, że używamy liniowego gradientu do zdefiniowania pływającego obszaru kształtu CSS. Coś takiego, w którym przechodzimy od jednolitego koloru do przezroczystości pod kątem 45 °:

Normalnie zdefiniowalibyśmy to jako background-imageelement. Gdybyśmy unosili ten element i upuścili obok niego jakąś zawartość, gradient i zawartość byłyby obok siebie.

Ale jeśli zamienimy się background-imagena shape-outside, nie zobaczymy już gradientu, ale zawartość zawija się wokół niego, gdzie piksele gradientu są przezroczyste.

Ale powiedzmy, że uważamy, że tekst musi nieco bardziej przylegać do kształtu. Tam możemy sięgnąć shape-image-threshold. Możemy go użyć do dostosowania miejsca, w którym zawartość naturalnie zawija się wokół przezroczystych pikseli, włączając piksele, które są półprzezroczyste. Na przykład shape-image-thresholdwartość .3 będzie obejmować piksele, które są ponad 30% nieprzezroczyste w pływającym obszarze kształtu.

Tym razem dodamy gradient, aby zobaczyć, jak to działa.

Zobaczyć, że? Deklarując shape-image-thresholddrugi kształt i ustawiając go na wartość 0,15, umieściliśmy w obszarze pływającym piksele, które są bardziej niż 15% nieprzezroczyste, dzięki czemu zawartość nakłada się na kształt.

Działa to również, gdy definiujemy kształt zewnętrzny za pomocą rzeczywistego pliku obrazu, który używa przezroczystości. Ta sama sprawa, tylko inny kształt do pracy.

Składnia

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

Dotyczy: pływaków
Odziedziczone: nie
Wartość początkowa: 0,0
Typ animacji: numer

Wartości

shape-image-thresholdWłaściwość przyjmuje jedną wartość alfa w zakresie od 0 do 1, gdzie 0 oznacza odpowiednik poziomu zmętnienia 0% (całkowicie przezroczysta), a 1 jest odpowiednikiem poziomu zmętnienia 100% (brak przejrzystości). Wartość początkowa to 0,0.