CSS: img

.instui-img — tyylitelty <img>, jossa on päällekkäin kasautuvat näyttö-, rajaus- ja efektimuokkaimet.

Efektit yhdistyvät jaetun --pantoken-img-filter-mukautetun ominaisuuden kautta, joten -with-grayscale ja -with-blur voivat olla käytössä samanaikaisesti; -constrain-*-rajausmuokkaimet vaativat kuluttajalta ruudun koon asettamisen eksplisiittisesti.

Source: img.css

Saavutettavuus

Anna kuvaa kuvaileva ja merkityksellinen alt-teksti, ja käytä tyhjää alt=""-arvoa pelkästään koristeellisille kuville, jotta apuvälineet ohittavat ne.

Käyttö

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

Esimerkit

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

Muokkaajat

Muokkaaja	Kuvaus
.-constrain-contain	Skaalaa mahtumaan laatikkoon (contain).
.-constrain-cover	Skaalaa täyttämään laatikon (cover).
.-display-block	Näytä lohkoelementtinä.
.-with-blur	Käytä sumennusefektiä.
.-with-grayscale	Käytä harmaasävyefektiä.

Mukautetut ominaisuudet

Ominaisuus	Tyyppi	Oletus	Kuvaus
--pantoken-img	—	—	filter <filter-value-list> | none — Kuvan koostettu CSS-suodatin; efektimuokkaimet asettavat sen, ja voit ylikirjoittaa sen omalla suodattimella.

Käytetyt tokenit

Token	Tyyppi	Arvo
--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