CSS: img

.instui-img — <img> stíleáilte le modhnóirí taispeána, gearrtha agus éifeachta a shraith.

Comhcheanglaítear éifeachtaí tríd an airí saincheaptha roinnte --pantoken-img-filter, mar sin is féidir le -with-grayscale agus -with-blur a bheith i bhfeidhm le chéile; éilíonn na modhnóirí gearrtha -constrain-* go n-méidníonn an tomhaltóir an bosca go sainráite.

Source: img.css

Inrochtaineacht

Soláthair téacs alt bríomhar a dhéanann cur síos ar an íomhá, agus bain úsáid as alt="" folamh d’íomhánna go hiomlán maisiúla ionas go seachnóidh teicneolaíochtaí cúnta iad.

Úsáid

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

Samplaí

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

Modhnóirí

Modhnóir	Cur síos
.-constrain-contain	Scála chun oiriúnú laistigh den bhosca (contain).
.-constrain-cover	Scála chun an bosca a líonadh (cover).
.-display-block	Taispeáin mar eilimint bloc.
.-with-blur	Cuir éifeacht doiléire i bhfeidhm.
.-with-grayscale	Cuir éifeacht liathscála i bhfeidhm.

Airíonna saincheaptha

Airí	Cineál	Réamhshocraithe	Cur síos
--pantoken-img	—	—	filter <filter-value-list> | none — An scagaire CSS comhchomhdhéanta ar an íomhá; socraíonn na modhnóirí éifeachta é, agus is féidir é a shárú chun scagaire saincheaptha a úsáid.

Tóicíní a úsáideadh

Token	Cineál	Luach
--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