CSS: img
.instui-img — Egy stilizált <img> megjelenítési, vágási és hatásmódosítókkal, amelyek egymásra rakódnak.
Forrás: img.css
Akadálymentesség
Adj értelmes alt szöveget, amely leírja a képet, és használj üres alt=""-t tisztán dekoratív képekhez, hogy az asszisztív technikák kihagyják azokat.
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/img.css";Példák
html
<img class="instui-img" alt="Gradient">Módosítók
| Módosító | Leírás |
|---|---|
.-constrain-contain | Méretezd a dobozba való illeszkedéshez (tartalmazás). |
.-constrain-cover | Méretezd a doboz kitöltéséhez (borítás). |
.-display-block | Jelenítsd meg blokkelem formájában. |
.-with-blur | Alkalmazz elmosódást. |
.-with-grayscale | Alkalmazz szürkeárnyalat hatást. |
Egyéni tulajdonságok
| Tulajdonság | Típus | Alapértelmezett | Leírás |
|---|---|---|---|
--pantoken-img | — | — | filter <filter-value-list> | none — A képen lévő összeállított CSS szűrő; a hatásmódosítók megadják, és felülírhatod egy egyéni szűrőhöz. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-img-effect-transition-duration | <time> | 1s |
--instui-component-img-image-blur-amount | <length> | 0.25em |
--pantoken-img-filter | <filter-value-list> | none | none |