CSS: img

.instui-img — Ein gestaltetes <img> mit Anzeige-, Zuschnitt- und Effekt-Modifikatoren, die sich stapeln.

Effekte setzen sich über die gemeinsame benutzerdefinierte Eigenschaft --pantoken-img-filter zusammen, sodass -with-grayscale und -with-blur gemeinsam angewendet werden können; die -constrain-* Zuschnittsmodifikatoren erfordern, dass der Verwender die Box explizit dimensioniert.

Source: img.css

Barrierefreiheit

Geben Sie aussagekräftigen alt-Text an, der das Bild beschreibt, und verwenden Sie für rein dekorative Bilder ein leeres alt="", damit Hilfstechnologie sie überspringt.

Verwendung

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

Beispiele

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

Modifikatoren

Modifikator	Beschreibung
.-constrain-contain	An die Box anpassen (contain).
.-constrain-cover	Die Box ausfüllen (cover).
.-display-block	Als Block-Element anzeigen.
.-with-blur	Einen Unschärfeeffekt anwenden.
.-with-grayscale	Einen Graustufeneffekt anwenden.

Benutzerdefinierte Eigenschaften

Eigenschaft	Typ	Standard	Beschreibung
--pantoken-img	—	—	filter <filter-value-list> | none — Der zusammengesetzte CSS-Filter auf dem Bild; die Effekt-Modifikatoren setzen ihn, und Sie können ihn für einen benutzerdefinierten Filter überschreiben.

Verbrauchte Tokens

Token	Typ	Wert
--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