CSS: img

.instui-img — Arddulliwyd <img> gyda addasyddion arddangos, torri, ac effaith sy'n pilio.

Mae effeithiau'n cyfansoddi trwy'r eiddo arferiad rhannu --pantoken-img-filter, felly gall -with-grayscale a -with-blur gymhwyso gyda'i gilydd; mae'r addasyddion torri -constrain-* yn gofyn i'r defnyddiwr bennu maint y blwch yn eglur.

Source: img.css

Hygyrchedd

Darparwch destun alt ystyrlon sy'n disgrifio'r ddelwedd, a defnyddiwch alt="" gwag ar gyfer delweddau addurnol pur fel y bydd technoleg cynorthwyol yn eu hepgor.

Defnydd

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

Enghreifftiau

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

Modyfiwyr

Modyfiwr	Disgrifiad
.-constrain-contain	Graddfwyd i ffitio o fewn y blwch (contain).
.-constrain-cover	Graddfwyd i lenwi'r blwch (cover).
.-display-block	Arddangos fel elfen bloc.
.-with-blur	Cymhwyso effaith aneglur.
.-with-grayscale	Cymhwyso effaith du-a-gwyn.

Priodweddau arferiad

Eiddo	Math	Diofyn	Disgrifiad
--pantoken-img	—	—	filter <filter-value-list> | none — Y hidlydd CSS cyfansoddedig ar y ddelwedd; mae'r addasyddion effaith yn ei osod, a gallwch ei newid ar gyfer hidlydd wedi'i deilwra.

Tocynnau a ddefnyddiwyd

Token	Math	Gwerth
--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