CSS: img

.instui-img — En stilisert <img> med visnings-, beskjærings- og effektmodifikatorer som kan stables.

Effekter komponeres gjennom den delte --pantoken-img-filter egendefinerte egenskapen, så -with-grayscale og -with-blur kan brukes sammen; -constrain-* beskjæringsmodifikatorer krever at forbrukeren eksplisitt angir boksens størrelse.

Source: img.css

Tilgjengelighet

Gi meningsfull alt-tekst som beskriver bildet, og bruk en tom alt="" for rent dekorative bilder slik at hjelpemiddelteknologi hopper over dem.

Bruk

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

Eksempler

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

Modifikatorer

Modifikator	Beskrivelse
.-constrain-contain	Skaler for å passe innenfor boksen (contain).
.-constrain-cover	Skaler for å fylle boksen (cover).
.-display-block	Vis som et blokk-element.
.-with-blur	Bruk en uskarphetseffekt.
.-with-grayscale	Bruk en gråtoneeffekt.

Egendefinerte egenskaper

Egenskap	Type	Standard	Beskrivelse
--pantoken-img	—	—	filter <filter-value-list> | none — Den sammensatte CSS-filteret på bildet; effektmodifikatorene angir det, og du kan overstyre det for et tilpasset filter.

Forbrukte tokens

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