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