CSS: img

.instui-img — Stílbært <img> með birtingu-, klippu- og áhrifabreytingum sem leggjast ofan á hvor aðra.

Áhrif raðast saman í gegnum sameiginlega sérkenni --pantoken-img-filter, svo -with-grayscale og -with-blur geta verið notuð saman; klippubreyturnar -constrain-* krefjast þess að neytandinn stilli stærð kassans skýrt.

Source: img.css

Aðgengi

Gefðu merkingarbæran texta fyrir alt sem lýsir myndinni, og notaðu tómann alt="" fyrir hreinar skreytingarmyndir svo hjálpartækni sleppi þeim.

Notkun

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

Dæmi

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

Breytingar

Breyti	Lýsing
.-constrain-contain	Skala til að passa innan kassans (contain).
.-constrain-cover	Skala til að fylla kassann (cover).
.-display-block	Birta sem block-þáttur.
.-with-blur	Beita óskýringu.
.-with-grayscale	Beita gráum áhrifum.

Sérsniðnar eigindir

Eiginleiki	Tegund	Sjálfgefið	Lýsing
--pantoken-img	—	—	filter <filter-value-list> | none — Samsett CSS-sía á myndinni; áhrifabreyturnar stilla hana, og þú getur yfirskrifað hana til að nota sérsniðna síu.

Notuð tákn

Token	Tegund	Gildi
--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