Masque-clip - Astuces CSS

Anonim

La mask-clippropriété CSS fait partie de la spécification CSS Masking Module Level 1 et définit la zone de peinture du masque. Il découpe littéralement la zone d'arrière-plan d'un élément et définit les zones qui apparaissent à travers le masque: bordure, remplissage ou zone de contenu. C'est un peu comme mettre le cadre sur une photo, en ne montrant que les parties de la photo qui ne sont pas couvertes par le cadre. Seulement, dans ce cas, nous définissons ce qui est découpé à l'aide des valeurs du modèle de boîte CSS.

.element ( mask-image: url(sun.svg); mask-clip: padding-box; )

Cela fonctionne comme la background-clippropriété, sauf qu'elle a trois valeurs supplémentaires qui s'appliquent aux éléments SVG. Dans la démonstration suivante, vous pouvez modifier la zone de peinture du masque à l'aide de cette propriété. Il y a la même image en dessous pour montrer l'effet de mieux masquer et de marquer les zones de bordure et de remplissage:

Syntaxe

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Valeur initiale: border-box
  • S'applique à: tous les éléments. En SVG, il s'applique aux éléments conteneurs à l'exclusion de l' élément, tous les éléments graphiques.
  • Héritée: non
  • Type d'animation: discret

Valeurs

/* Keyword values */ mask-clip: border-box; mask-clip: content-box; mask-clip: fill-box; mask-clip: margin-box; mask-clip: padding-box; mask-clip: stroke-box; mask-clip: view-box; /* No clip */ mask-clip: no-clip; /* Global values */ mask-clip: intial; mask-clip: inherit; mask-clip: unset;
  • border-box: Le contenu peint est découpé dans la zone de bordure. (Valeur par défaut)
  • content-box: Le contenu peint est découpé dans la zone de contenu.
  • fill-box: Le contenu peint est découpé dans le cadre de délimitation de l'objet.
  • margin-box: Le contenu peint est découpé dans la zone de marge.
  • padding-box: Le contenu peint est découpé dans la zone de remplissage.
  • stroke-box: Le contenu peint est découpé dans le cadre de délimitation du contour.
  • view-box: Utilise la fenêtre SVG la plus proche comme zone de référence. Si un viewBoxattribut est spécifié pour l'élément de création de la fenêtre SVG:
    • La boîte de référence est positionnée à l'origine du système de coordonnées établi par l' viewBoxattribut.
    • La dimension de la boîte de référence est définie sur les valeurs widthet heightde l' viewBoxattribut.
  • no-clip: Le contenu peint n'est pas tronqué.
  • initial: Applique le paramètre par défaut de la propriété, à savoir border-box.
  • inherit: Adopte la mask-clipvaleur du parent.
  • unset: Supprime le courant mask-clipde l'élément.

Remarques

  • Pour les éléments SVG sans boîte de mise en page CSS associée, les valeurs content-box, padding-boxcalculent vers fill-boxet pour border-boxet margin-boxcalculent vers stroke-box.
  • Pour les éléments avec une boîte de mise en page CSS associée, les valeurs sont fill-boxcalculées vers content-boxet pour stroke-boxet view-boxcalculées à la valeur initiale de mask-clipce qui est border-box.

Utiliser plusieurs valeurs

Cette propriété peut prendre une liste de valeurs séparées par des virgules pour les clips de masque et chaque valeur est appliquée à une image de calque de masque correspondante spécifiée dans la mask-imagepropriété. Dans l'exemple suivant, la première valeur spécifie la zone de peinture de masque de la première image, la seconde valeur spécifie la zone de peinture de masque de la deuxième image, et ainsi de suite.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-clip: padding-box, border-box, content-box; )

Démo

Prise en charge du navigateur

C'EST À DIRE Bord Firefox Chrome Safari Opéra
Non 79+ 53+ Tout 4+ 15+
Chrome Android Android Firefox Navigateur Android Safari sur iOS Opera Mobile
Tout Tout Tout Tout 59+
Source: caniuse

Plus d'information

Article le 6 nov.2016

Détourage et masquage en CSS

Mojtaba Seyedi