Shape-image-prag - CSS-трикове | CSS алманах 2025

shape-image-thresholdСвойството CSS задава кои пиксели се включват във формата на изображение, когато shape-outsideсе използва за определяне на плаващата област на CSS елемент.

Да предположим, че използваме линеен градиент, за да дефинираме плаващата площ на CSS форма. Нещо подобно, когато преминаваме от плътен цвят към прозрачен под ъгъл 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.