Схапе-имаге-праг - ЦСС-трикови

shape-image-thresholdСвојство ЦСС поставља који пиксели су укључени у облик слике када shape-outsideсе користи за дефинисање плутајуће површине ЦСС елемента.

Рецимо да користимо линеарни градијент за дефинисање плутајуће површине ЦСС облика. Нешто слично овоме када од пуне боје пређемо у прозирну под углом од 45 °:

Обично бисмо то дефинисали као background-imageелемент. Ако плутамо по овом елементу и испустимо неки садржај поред њега, градијент и садржај седеће један поред другог.

Али, ако заменимо background-imageза shape-outside, више нећемо видети нагиб, али садржај омота око њега, где су пиксела у градијента транспарентан.

Али рецимо да мислимо да текст треба мало ближе загрлити облик. Ту можемо да посегнемо shape-image-threshold. Помоћу ње можемо да прилагодимо место где се садржај природно обавија око прозирних пиксела тако што укључује пикселе који су полупрозирни. На пример, shape-image-thresholdвредност .3 ће укључити пикселе који су више од 30% непрозирни у плутајућем делу облика.

Овај пут ћемо укључити градијент да бисмо видели како то функционише.

Погледај? Декларирањем shape-image-thresholdдругог облика и постављањем на вредност од .15, у плутајуће подручје смо уврстили пикселе веће од 15% непрозирних, што омогућава садржају да прекрива облик као мрљу.

Ово такође функционише када дефинишемо спољни облик стварном сликовном датотеком која користи прозирност. Исти посао, само другачији облик за рад.

Синтакса

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

Односи се на: флоатс
Наследио: не
Почетна вредност: 0,0
Тип анимације: број

Вредности

shape-image-thresholdПроперти прихвата једну алфа вредност између 0 и 1, где 0 представља еквивалент једног нивоа покривања од 0% (потпуно транспарентни) и 1 је еквивалент једног нивоа покривања од 100% (без транспарентности). Почетна вредност је 0,0.