CSS: img

.instui-img — Eit stilsett <img> med visnings-, beskjærings- og effektmodifikatorar som kan leggast oppå kvarandre.

Effektar blir samansette via den delte tilpassa eigenskapen --pantoken-img-filter, så -with-grayscale og -with-blur kan nyttast samtidig; -constrain-*-beskjæringsmodifikatorane krev at forbrukaren eksplisitt angir storleiken på boksen.

Source: img.css

Tilgjenge

Gjev meiningsfull alt-tekst som skildrar biletet, og bruk ei tom alt="" for rein dekorative bilete slik at hjelpemiddel hoppar over dei.

Bruk

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

Døme

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

Modifikatorar

Modifikator	Skildring
.-constrain-contain	Skaler for å passe inn i boksen (contain).
.-constrain-cover	Skaler for å fylle boksen (cover).
.-display-block	Vis som eit blokk-element.
.-with-blur	Bruk ein uskarpeffekt.
.-with-grayscale	Bruk ein gråskalaeffekt.

Tilpassa eigenskapar

Eigenskap	Type	Standard	Skildring
--pantoken-img	—	—	filter <filter-value-list> | none — Det samansette CSS-filteret på biletet; effektmodifikatorane set det, og du kan overstyre det for eit tilpassa filter.

Token brukt

Token	Type	Verdi
--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