CSS: img

.instui-img — 一個有樣式的 <img>，具備可堆疊的顯示、裁切與效果修飾子。

效果透過共用的 --pantoken-img-filter 自訂屬性合成，因此 -with-grayscale 與 -with-blur 可以同時套用；而 -constrain-* 裁切修飾子則要求使用者明確為盒子指定大小。

Source: img.css

無障礙

提供能描述圖片的有意義 alt 文本；對純裝飾性圖片請使用空的 alt=""，以便輔助技術略過。

使用方法

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

範例

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

修飾器

修飾器	說明
.-constrain-contain	縮放以符合盒子 (contain)。
.-constrain-cover	縮放以填滿盒子 (cover)。
.-display-block	以區塊元素顯示。
.-with-blur	套用模糊效果。
.-with-grayscale	套用灰階效果。

自訂屬性

屬性	型別	預設	說明
--pantoken-img	—	—	filter <filter-value-list> | none — 組合後套用於圖片的 CSS filter；效果修飾子會設定它，且你可以覆寫以使用自訂濾鏡。

已使用的代幣

Token	型別	值
--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