CSS: img

.instui-img — Sebuah <img> berstail dengan pengubah paparan, pemangkasan, dan kesan yang bertindih.

Kesan digabung melalui sifat tersuai --pantoken-img-filter yang dikongsi, jadi -with-grayscale dan -with-blur boleh digunakan bersama; pengubah pemangkasan -constrain-* memerlukan pengguna menetapkan saiz kotak secara eksplisit.

Source: img.css

Aksesibiliti

Berikan teks alt yang bermakna yang menerangkan imej, dan gunakan alt="" kosong untuk imej semata-mata hiasan supaya teknologi bantuan mengabaikannya.

Penggunaan

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

Contoh

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

Pemodifikasi

Pemodifikasi	Penerangan
.-constrain-contain	Skala untuk muat dalam kotak (contain).
.-constrain-cover	Skala untuk mengisi kotak (cover).
.-display-block	Papar sebagai elemen blok.
.-with-blur	Terapkan kesan kabur.
.-with-grayscale	Terapkan kesan skala kelabu.

Hartanah tersuai

Sifat	Jenis	Lalai	Penerangan
--pantoken-img	—	—	filter <filter-value-list> | none — Penapis CSS tersusun pada imej; pengubah kesan menetapkannya, dan anda boleh menimpanya untuk penapis tersuai.

Token digunakan

Token	Jenis	Nilai
--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