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 过滤器；效果修饰符会设置它，您可以覆盖该值以使用自定义过滤器。

消耗代币

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