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