Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété mask-position

Description de la propriété mask-position.

La propriété mask-position est expérimentale : vérifiez sa compatibilité avant de l'utiliser, et si nécessaire, utilisez les préfixes spécifiques à chaque navigateur (-moz-, -webkit-, etc.).

Définit comment est positionné le masque par rapport à l'élément qu'il doit masquer.

Pour des explications plus complètes sur la technique de masquage, reportez-vous à la propriété mask.

Voyez aussi la propriété mask-origin qui influence également le positionnement du masque.

Valeurs pour mask-position.

  • mask-position: left bottom; x y

    mask-position accepte deux valeurs, séparées par un espace. La première valeur (x) indique le positionnement horizontal du masque, et la deuxième (y) son positionnement vertical.

    Ce positionnement est dans tous les cas, calculé par rapport à l'origine définie par mask-origin.

    La valeur x peut être left, center ou right.
    La valeur y peut être top, center ou bottom.

    Si une seule valeur est indiquée, l'autre est fixée par défaut à center.

    La valeur par défaut est top left.

  • mask-position: 50px 25px; x y

    Le positionnement du masque peut également être indiqué par des valeurs numériques, suivies d'une unité de dimension (voir les unités de dimensions en CSS). Ces valeurs peuvent être positives ou négatives.

    S'il s'agit de pourcentages, il seront calculés, pour x par rapport à la largeur de l'élément, et par rapport à sa hauteur pour le pourcentage y. Le calcul prend en compte les dimensions du masque, de façon à ce que 50% corresponde à un masque centré.

    Pour le positionnement horizontal du masque, la formule est la suivante :
    x% x (L - l)
    x% est le pourcentage indiqué.
    L est la largeur de l'élément.
    l est la largeur du masque.

    Exemple pour un élément qui mesure 800 pixels de large et un masque de 50 pixels de large. Si le positionnement est demandé à 50%, le bord gauche du masque sera à 375 pixels (et non pas 400) :
    50% x (800 - 50) = 375 pixels.

    Si une seule valeur est indiquée, elle est appliquée au positionnement horizontal du masque. Son positionnement vertical est fixé à la valeur center.

  • mask-position: initial;

    La valeur initiale est center left.

  • mask-position: unset; mask-position: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Attention ! Votre navigateur ne gère pas le masquage des éléments.
mask-origin :
mask-position :
Exemple - propriété CSS mask-position
L'élément original : une image avec
un padding et une bordure


Masque - propriété CSS mask-position



Le masque
Résultat - propriété CSS mask-position
Le résultat
CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie en français « feuilles de styles en cascade ». Le CSS correspond est un langage déclaratif (non algorithmique) permettant de mettre en forme et de mettre en page des documents HTML ou XML.


Masque - propriété CSS mask-position



Le masque
CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie en français « feuilles de styles en cascade ». Le CSS correspond est un langage déclaratif (non algorithmique) permettant de mettre en forme et de mettre en page des documents HTML ou XML.

Prise en charge par les navigateurs (compatibilité).

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Masquage - Propriétés.

  • mask : Résumé des paramètres de masquage.
  • mask-clip : Zone concernée par le masquage.
  • mask-image : Image ou le fichier SVG qui sera utilisé comme masque
  • mask-mode : Mode de masquage (couche alpha, luminance...)
  • mask-origin : Référence pour le positionnement du masque.
  • mask-repeat : Mode de répétition du masque si celui-ci est plus petit que l'élément à masquer.
  • mask-size : Dimensions du masque.