CSS: img

.instui-img — یک <img> با استایل که مادیفایرهای نمایش، برش و افکت را به‌صورت پشته‌ای اعمال می‌کند.

افکت‌ها از طریق خاصیت سفارشی مشترک --pantoken-img-filter ترکیب می‌شوند، بنابراین -with-grayscale و -with-blur می‌توانند هم‌زمان اعمال شوند؛ مادیفایرهای برش -constrain-* از مصرف‌کننده می‌خواهند که اندازهٔ جعبه را صریحاً تعیین کند.

Source: img.css

دسترس‌پذیری

متن معنادار alt ارائه دهید که تصویر را توصیف کند، و برای تصاویر صرفاً تزئینی از یک alt="" خالی استفاده کنید تا ابزارهای یاری‌رسان آن‌ها را نادیده بگیرند.

نحوه استفاده

@import "@pantoken/components/components.css";
@import "@pantoken/components/img.css";

نمونه‌ها

<img class="instui-img" alt="Gradient">

تعدیل‌کننده‌ها

تعدیل‌کننده	توضیحات
.-constrain-contain	مقیاس تا قرارگیری کامل درون جعبه (contain).
.-constrain-cover	مقیاس تا پر کردن کامل جعبه (cover).
.-display-block	نمایش به‌صورت عنصر بلاک.
.-with-blur	اعمال افکت محو (blur).
.-with-grayscale	اعمال افکت سیاه‌وسفید (grayscale).

خواص سفارشی

خاصیت	نوع	پیش‌فرض	توضیحات
--pantoken-img	—	—	filter <filter-value-list> | none — فیلتر CSS ترکیب‌شده روی تصویر؛ مادیفایرهای افکت آن را تنظیم می‌کنند و می‌توانید برای فیلتر سفارشی آن را بازنویسی کنید.

توکن‌های مصرف‌شده

Token	نوع	مقدار
--instui-component-img-effect-transition-duration	<time>	1s
--instui-component-img-image-blur-amount	<length>	0.25em
--pantoken-img-filter	none | <filter-value-list> | <-ms-filter-function-list>	none