mask-image |
Masque d'image |
|---|---|
| Tailwind CSS | |
Classe
| mask-image |
Description
Cet utilitaire applique une image ou un dégradé comme masque pour contrôler la transparence de l'élément.
Définition
| Classe | Styles |
|---|---|
| mask-[<valeur>] | mask-image: <valeur>; |
| mask-(<propriete-personnalisee>) | mask-image: var(<propriete-personnalisee>); |
| mask-none | mask-image: none; |
| mask-linear-<nombre> | mask-image: linear-gradient(<nombre>deg, black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to)); |
| -mask-linear-<nombre> | mask-image: linear-gradient(calc(<nombre>deg * -1), black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to)); |
| mask-linear-from-<nombre> | mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing) * <nombre>), transparent var(--tw-mask-linear-to)); |
| mask-linear-from-<pourcentage> | mask-image: linear-gradient(var(--tw-mask-linear-position), black <pourcentage>, transparent var(--tw-mask-linear-to)); |
| mask-linear-from-<couleur> | mask-image: linear-gradient(var(--tw-mask-linear-position), <couleur> var(--tw-mask-linear-from), transparent var(--tw-mask-linear-to)); |
| mask-linear-from-(<propriete-personnalisee>) | mask-image: linear-gradient(var(--tw-mask-linear-position), black <propriete-personnalisee>, transparent var(--tw-mask-linear-to)); |
| mask-linear-from-[<valeur>] | mask-image: linear-gradient(var(--tw-mask-linear-position), black <valeur>, transparent var(--tw-mask-linear-to)); |
| mask-linear-to-<nombre> | mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent calc(var(--spacing) * <nombre>)); |
| mask-linear-to-<pourcentage> | mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent <pourcentage>); |
| mask-linear-to-<couleur> | mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), <couleur> var(--tw-mask-linear-to)); |
| mask-linear-to-(<propriete-personnalisee>) | mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent var(<propriete-personnalisee>)); |
| mask-linear-to-[<valeur>] | mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent <valeur>); |
| mask-t-from-<nombre> | mask-image: linear-gradient(to top, black calc(var(--spacing) * <nombre>), transparent var(--tw-mask-top-to)); |
| mask-t-from-<pourcentage> | mask-image: linear-gradient(to top, black <pourcentage>, transparent var(--tw-mask-top-to)); |
| mask-t-from-<couleur> | mask-image: linear-gradient(to top, <couleur> var(--tw-mask-top-from), transparent var(--tw-mask-top-to)); |
| mask-t-from-(<propriete-personnalisee>) | mask-image: linear-gradient(to top, black var(<propriete-personnalisee>), transparent var(--tw-mask-top-to)); |
| mask-t-from-[<valeur>] | mask-image: linear-gradient(to top, black <valeur>, transparent var(--tw-mask-top-to)); |
| mask-t-to-<nombre> | mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing) * <nombre>)); |
| mask-t-to-<pourcentage> | mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <pourcentage>); |
| mask-t-to-<couleur> | mask-image: linear-gradient(to top, black var(--tw-mask-top-from), <couleur> var(--tw-mask-top-to)); |
| mask-t-to-(<propriete-personnalisee>) | mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var(<propriete-personnalisee>)); |
| mask-t-to-[<valeur>] | mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <valeur>); |
| mask-r-from-<nombre> | mask-image: linear-gradient(to right, black calc(var(--spacing) * <nombre>), transparent var(--tw-mask-right-to)); |
| mask-r-from-<pourcentage> | mask-image: linear-gradient(to right, black <pourcentage>, transparent var(--tw-mask-right-to)); |
| mask-r-from-<couleur> | mask-image: linear-gradient(to right, <couleur> var(--tw-mask-right-from), transparent var(--tw-mask-right-to)); |
| mask-r-from-(<propriete-personnalisee>) | mask-image: linear-gradient(to right, black var(<propriete-personnalisee>), transparent var(--tw-mask-right-to)); |
| mask-r-from-[<valeur>] | mask-image: linear-gradient(to right, black <valeur>, transparent var(--tw-mask-right-to)); |
| mask-r-to-<nombre> | mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing) * <nombre>)); |
| mask-r-to-<pourcentage> | mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <pourcentage>); |
| mask-r-to-<couleur> | mask-image: linear-gradient(to right, black var(--tw-mask-right-from), <couleur> var(--tw-mask-right-to)); |
| mask-r-to-(<propriete-personnalisee>) | mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var(<propriete-personnalisee>)); |
| mask-r-to-[<valeur>] | mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <valeur>); |
| mask-b-from-<nombre> | mask-image: linear-gradient(to bottom, black calc(var(--spacing) * <nombre>), transparent var(--tw-mask-bottom-to)); |
| mask-b-from-<pourcentage> | mask-image: linear-gradient(to bottom, black <pourcentage>, transparent var(--tw-mask-bottom-to)); |
| mask-b-from-<couleur> | mask-image: linear-gradient(to bottom, <couleur> var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to)); |
| mask-b-from-(<propriete-personnalisee>) | mask-image: linear-gradient(to bottom, black var(<propriete-personnalisee>), transparent var(--tw-mask-bottom-to)); |
| mask-b-from-[<valeur>] | mask-image: linear-gradient(to bottom, black <valeur>, transparent var(--tw-mask-bottom-to)); |
| mask-b-to-<nombre> | mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing) * <nombre>)); |
| mask-b-to-<pourcentage> | mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <pourcentage>); |
| mask-b-to-<couleur> | mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), <couleur> var(--tw-mask-bottom-to)); |
| mask-b-to-(<propriete-personnalisee>) | mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var(<propriete-personnalisee>)); |
| mask-b-to-[<valeur>] | mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <valeur>); |
| mask-l-from-<nombre> | mask-image: linear-gradient(to left, black calc(var(--spacing) * <nombre>), transparent var(--tw-mask-left-to)); |
| mask-l-from-<pourcentage> | mask-image: linear-gradient(to left, black <pourcentage>, transparent var(--tw-mask-left-to)); |
| mask-l-from-<couleur> | mask-image: linear-gradient(to left, <couleur> var(--tw-mask-left-from), transparent var(--tw-mask-left-to)); |
| mask-l-from-(<propriete-personnalisee>) | mask-image: linear-gradient(to left, black var(<propriete-personnalisee>), transparent var(--tw-mask-left-to)); |
| mask-l-from-[<valeur>] | mask-image: linear-gradient(to left, black <valeur>, transparent var(--tw-mask-left-to)); |
| mask-l-to-<nombre> | mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing) * <nombre>)); |
| mask-l-to-<pourcentage> | mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), transparent <pourcentage>); |
| mask-l-to-<couleur> | mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), <couleur> var(--tw-mask-left-to)); |
| mask-l-to-(<propriete-personnalisee>) | mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent var(<propriete-personnalisee>)); |
| mask-l-to-[<valeur>] | mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent <valeur>); |
| mask-y-from-<nombre> | mask-image: linear-gradient(to top, black calc(var(--spacing) * <nombre>), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black calc(var(--spacing) * <nombre>), transparent var(--tw-mask-bottom-to)); mask-composite: intersect; |
| mask-y-from-<pourcentage> | mask-image: linear-gradient(to top, black <pourcentage>, transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black <pourcentage>, transparent var(--tw-mask-bottom-to)); mask-composite: intersect; |
| mask-y-from-<couleur> | mask-image: linear-gradient(to top, <couleur> var(--tw-mask-top-from), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, <couleur> var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to)); mask-composite: intersect; |
| mask-y-from-(<propriete-personnalisee>) | mask-image: linear-gradient(to top, black var(<propriete-personnalisee>), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black var(<propriete-personnalisee>), transparent var(--tw-mask-bottom-to)); mask-composite: intersect; |
| mask-y-from-[<valeur>] | mask-image: linear-gradient(to top, black <valeur>, transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black <valeur>, transparent var(--tw-mask-bottom-to)); mask-composite: intersect; |
| mask-y-to-<nombre> | mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing) * <nombre>)), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing) * <nombre>)); mask-composite: intersect; |
| mask-y-to-<pourcentage> | mask-image: linear-gradient(to bottom, black var(--tw-mask-top-from), transparent <pourcentage>), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <pourcentage>); mask-composite: intersect; |
| mask-y-to-<couleur> | mask-image: linear-gradient(to bottom, black var(--tw-mask-top-from), <couleur> var(--tw-mask-top-to)), linear-gradient(to bottom, black var(--tw-mask-bottom-from), <couleur> var(--tw-mask-bottom-to)); mask-composite: intersect; |
| mask-y-to-(<propriete-personnalisee>) | mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var(<propriete-personnalisee>)),linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var(<propriete-personnalisee>)); mask-composite: intersect; |
| mask-y-to-[<valeur>] | mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <valeur>),linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <valeur>); mask-composite: intersect; |
| mask-x-from-<nombre> | mask-image: linear-gradient(to right, black calc(var(--spacing) * <nombre>), transparent var(--tw-mask-right-to)), linear-gradient(to left, black calc(var(--spacing) * <nombre>), transparent var(--tw-mask-left-to)); mask-composite: intersect; |
| mask-x-from-<pourcentage> | mask-image: linear-gradient(to right, black <pourcentage>, transparent var(--tw-mask-right-to)), linear-gradient(to left, black <pourcentage>, transparent var(--tw-mask-left-to)); mask-composite: intersect; |
| mask-x-from-<couleur> | mask-image: linear-gradient(to right, <couleur> var(--tw-mask-right-from), transparent var(--tw-mask-right-to)), linear-gradient(to left, <couleur> var(--tw-mask-left-from), transparent var(--tw-mask-left-to)); mask-composite: intersect; |
| mask-x-from-(<propriete-personnalisee>) | mask-image: linear-gradient(to right, black var(<propriete-personnalisee>), transparent var(--tw-mask-right-to)), linear-gradient(to left, black var(<propriete-personnalisee>), transparent var(--tw-mask-left-to)); mask-composite: intersect; |
| mask-x-from-[<valeur>] | mask-image: linear-gradient(to right, black <valeur>, transparent var(--tw-mask-right-to)), linear-gradient(to left, black <valeur>, transparent var(--tw-mask-left-to)); mask-composite: intersect; |
| mask-x-to-<nombre> | mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing) * <nombre>)), linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing) * <nombre>)); mask-composite: intersect; |
| mask-x-to-<pourcentage> | mask-image: linear-gradient(to left, black var(--tw-mask-right-from), transparent <pourcentage>), linear-gradient(to left, black var(--tw-mask-left-from), transparent <pourcentage>); mask-composite: intersect; |
| mask-x-to-<couleur> | mask-image: linear-gradient(to left, black var(--tw-mask-right-from), <couleur> var(--tw-mask-right-to)), linear-gradient(to left, black var(--tw-mask-left-from), <couleur> var(--tw-mask-left-to)); mask-composite: intersect; |
| mask-x-to-(<propriete-personnalisee>) | mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var(<propriete-personnalisee>)),linear-gradient(to left, black var(--tw-mask-left-from), transparent var(<propriete-personnalisee>)); mask-composite: intersect; |
| mask-x-to-[<valeur>] | mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <valeur>),linear-gradient(to left, black var(--tw-mask-left-from), transparent <valeur>); mask-composite: intersect; |
| mask-radial-[<valeur>] | mask-image: radial-gradient(<valeur>); |
| mask-radial-[<taille>] | --tw-mask-radial-size: <taille>; |
| mask-radial-[<taille>_<taille>] | --tw-mask-radial-size: <taille> <taille>; |
| mask-radial-from-<nombre> | mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black calc(var(--spacing) * <nombre>), transparent var(--tw-mask-radial-to)); |
| mask-radial-from-<pourcentage> | mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black <pourcentage>, transparent var(--tw-mask-radial-to)); |
| mask-radial-from-<couleur> | mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), <couleur> var(--tw-mask-radial-from), transparent var(--tw-mask-radial-to)); |
| mask-radial-from-(<propriete-personnalisee>) | mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(<propriete-personnalisee>), transparent var(--tw-mask-radial-to)); |
| mask-radial-from-[<valeur>] | mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black <valeur>, transparent var(--tw-mask-radial-to)); |
| mask-radial-to-<nombre> | mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent calc(var(--spacing) * <nombre>)); |
| mask-radial-to-<pourcentage> | mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent <pourcentage>); |
| mask-radial-to-<couleur> | mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), <couleur> var(--tw-mask-radial-to)); |
| mask-radial-to-(<propriete-personnalisee>) | mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent var(<propriete-personnalisee>)); |
| mask-radial-to-[<valeur>] | mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent <valeur>); |
| mask-circle | --tw-mask-radial-shape: circle; |
| mask-ellipse | --tw-mask-radial-shape: ellipse; |
| mask-radial-closest-corner | --tw-mask-radial-size: closest-corner; |
| mask-radial-closest-side | --tw-mask-radial-size: closest-side; |
| mask-radial-farthest-corner | --tw-mask-radial-size: farthest-corner; |
| mask-radial-farthest-side | --tw-mask-radial-size: farthest-side; |
| mask-radial-at-top-left | --tw-mask-radial-position: top left; |
| mask-radial-at-top | --tw-mask-radial-position: top; |
| mask-radial-at-top-right | --tw-mask-radial-position: top right; |
| mask-radial-at-left | --tw-mask-radial-position: left; |
| mask-radial-at-center | --tw-mask-radial-position: center; |
| mask-radial-at-right | --tw-mask-radial-position: right; |
| mask-radial-at-bottom-left | --tw-mask-radial-position: bottom left; |
| mask-radial-at-bottom | --tw-mask-radial-position: bottom; |
| mask-radial-at-bottom-right | --tw-mask-radial-position: bottom right; |
| mask-conic-<nombre> | mask-image: conic-gradient(from <nombre>deg, black var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to)); |
| -mask-conic-<nombre> | mask-image: conic-gradient(from calc(<nombre>deg * -1), black var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to)); |
| mask-conic-from-<nombre> | mask-image: conic-gradient(from var(--tw-mask-conic-position), black calc(var(--spacing) * <nombre>), transparent var(--tw-mask-conic-to)); |
| mask-conic-from-<pourcentage> | mask-image: conic-gradient(from var(--tw-mask-conic-position), black <pourcentage>, transparent var(--tw-mask-conic-to)); |
| mask-conic-from-<couleur> | mask-image: conic-gradient(from var(--tw-mask-conic-position), <couleur> var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to)); |
| mask-conic-from-(<propriete-personnalisee>) | mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(<propriete-personnalisee>), transparent var(--tw-mask-conic-to)); |
| mask-conic-from-[<valeur>] | mask-image: conic-gradient(from var(--tw-mask-conic-position), black <valeur>, transparent var(--tw-mask-conic-to)); |
| mask-conic-to-<nombre> | mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent calc(var(--spacing) * <nombre>)); |
| mask-conic-to-<pourcentage> | mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent <pourcentage>); |
| mask-conic-to-<couleur> | mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), <couleur> var(--tw-mask-conic-to); |
| mask-conic-to-(<propriete-personnalisee>) | mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent var(<propriete-personnalisee>); |
| mask-conic-to-[<valeur>] | mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent <valeur>); |
Dernière mise à jour : Vendredi, le 6 février 2026