shape-image-threshold

ویژگی shape-image-threshold مقدار کمینه شفافیت را برای ساخت یک شکل توسط ویژگی shape-outside تعیین می کند.

همانطور که در مطلب shape-outside بررسی شد می دانیم که یکی از راه های ساخت شکل برای یک عنصر شناور استفاده از یک تصویر دارای کانال آلفا است، یعنی قسمتی از تصویر دارای Transparency یا همان حالت نیمه شفاف بود. حال این سوال پیش می آید که چه مقدار شفافیت برای یک پیکسل از تصویر باعث می شود تا مرورگر آن پیکسل را جزیی از محدوده شکل در نظر بگیرد؟

جواب این سوال و تعیین کننده این مقدار ویژگی shape-image-threshold است که مقادیری بین 0 تا 1 می پذیرد.

فرض کنید تصویری داریم که قسمت های مختلف آن دارای opacity متفاوت هستند. مرورگر چگونه شکل مورد نظر را می تواند از تصویر مورد نظر بیرون بکشد؟

کافی است برای ویژگی shape-image-threshold مشخص کنیم که حداقل مقدار شفافیت یا همان opacity باید مثلا 0.5 باشد. در نتیجه پیکسل هایی از تصویر که دارای opacity بالاتر از 0.5 هستند شکل مورد نظر را تشکیل خواهند داد.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element {
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

مقدار اولیه و پیشفرض این ویژگی 0 می باشد.

دمو

اجازه بدهید تا آزمایشی را برای فهم بهتر این ویژگی طرح ریزی کنیم.

می دانیم که گرادینت ها از نوع تصویر هستند و همینطور می دانیم که می توانیم در زمان تعریف یک گرادینت از رنگ های نیمه شفاف استفاده کنیم.

در دموی زیر یک عنصر داریم که برای پس زمینه آن از یک گرادینت استفاده می کنیم. خصوصیت طرح گرادینت این است که هر قسمتی از آن دارای شفافیت یا آلفای متفاوت می باشد(از آلفای 0.4 تا 1) . با تغییر مقدار ویژگی shape-image-threshold توسط اسلایدر موجود شکلی که محتوای اطراف بر اساس آن دور عنصر جمع می شوند را تغییر دهید:

See the Pen shape-image-threshold Test by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی مرورگر ها