CSSCouper et Masquer


Syntaxe

  • Coupure
  • chemin de clip: <source-clip> | [<basic-shape> || <boîte-géométrie-clip>] | aucun
  • Masquage
  • image-masque: [aucun | <référence du masque>] #
  • mode masque: [<masque-mode>] #
  • mask-repeat: [<style de répétition] #
  • position du masque: [<position>] #
  • masque-clip: [<boîte-de-géométrie> | no-clip] #
  • mask-origin: [<boîte-de-géométrie>] #
  • taille de masque: [<bg-size>] #
  • mask-composite: [<compositing-operator>] #
  • mask: [<masque-référence> <mode masquage>? || <position> [/ <bg-size>]? || <style de répétition> || <boîte de géométrie> || [<boîte à géométrie> | no-clip] || <opérateur de composition>] #

Paramètres

Paramètre Détails
source de clip Une URL qui peut pointer vers un élément SVG incorporé (ou) un élément SVG dans un fichier externe contenant la définition du chemin du clip.
forme de base Fait référence à un inset() parmi inset() , circle() , ellipse() ou polygon() . En utilisant l'une de ces fonctions, le chemin de détourage est défini. Ces fonctions de forme fonctionnent exactement de la même manière que dans les formes pour les flotteurs
boîte à géométrie de clip Cela peut avoir une valeur parmi content-box , padding-box , border-box , margin-box , fill-box , stroke-box , stroke-box view-box . Lorsque ceci est fourni sans aucune valeur pour <basic-shape>, les bords de la boîte correspondante sont utilisés comme chemin pour le découpage. Utilisé avec un <basic-shape>, il sert de boîte de référence pour la forme.
référence de masque Cela peut être none ou une image ou une URL de référence à une source d'image de masque.
style répétitif Ceci spécifie comment le masque doit être répété ou classé dans les axes X et Y. Les valeurs prises en charge sont la repeat-x , la repeat-y , la repeat , l' space , le round , la no-repeat .
mode masque Peut être alpha ou luminance ou auto et indique si le masque doit être traité comme un masque alpha ou un masque de luminance. Si aucune valeur n'est fournie et que la référence de masque est une image directe, elle serait considérée comme un masque alpha (ou) si la référence de masque est une URL, elle serait alors considérée comme un masque de luminance.
position Cela spécifie la position de chaque couche de masque et son comportement est similaire à celui de la propriété background-position . La valeur peut être fournie dans une syntaxe à 1 valeur (comme top , 10% ) ou dans une syntaxe à 2 valeurs (comme en top right , 50% 50% ).
boîte à géométrie Ceci spécifie la boîte sur laquelle le masque doit être écrêté ( zone de peinture du masque ) ou la boîte qui doit être utilisée comme référence pour l'origine du masque ( zone de positionnement du masque ) en fonction de la propriété. La liste des valeurs possibles est content-box , padding-box , border-box , margin-box , fill-box , stroke-box , stroke-box view-box . Des explications détaillées sur le fonctionnement de chacune de ces valeurs sont disponibles dans la spécification W3C .
taille bg Cela représente la taille de chaque couche masque-image et a la même syntaxe que la background-size . La valeur peut être la longueur ou le pourcentage ou automatique ou couvrir ou contenir. La longueur, le pourcentage et l'auto peuvent être fournis en tant que valeur unique ou en tant que valeur unique pour chaque axe.
opérateur de compositing Cela peut être n'importe lequel parmi add , subtract , exclude , multiply par couche et définit le type d'opération de composition à utiliser pour cette couche avec celles situées en dessous. Des explications détaillées sur chaque valeur sont disponibles dans les spécifications du W3C .

Remarques

Le découpage et le masquage CSS sont des concepts très récents et la prise en charge de ces propriétés par le navigateur est donc plutôt faible.

Masques:

Au moment de la rédaction (juillet 2016), Chrome, Safari et Opera supportaient ces propriétés avec le préfixe -webkit- .

Firefox ne nécessite pas de préfixes mais prend en charge les masques uniquement lorsqu'il est utilisé avec des éléments de mask SVG. Pour les éléments de mask SVG en ligne, la syntaxe est mask: url(#msk) alors que pour les éléments de mask dans un fichier SVG externe, la syntaxe est mask: url('yourfilepath/yourfilename.svg#msk') . #msk dans les deux cas fait référence à l' id de l'élément de mask auquel il est fait référence. Comme indiqué dans cette réponse , Firefox ne prend actuellement en charge aucun paramètre autre que mask-reference dans la propriété mask .

Internet Explorer (et Edge) n'offre pas encore de support pour cette propriété.

La propriété mask-mode n'est actuellement pas prise en charge par les navigateurs avec ou sans préfixes.

Chemin de clip:

Au moment de rédiger (juillet 2016), Chrome, Safari et Opera supportent le clip-path lorsque le chemin est créé en utilisant des formes de base (comme circle , polygon ) ou la syntaxe url(#clipper) avec SVG inline. Ils ne prennent pas en charge le découpage basé sur des formes faisant partie de fichiers SVG externes. De plus, le préfixe -webkit doit être présent.

Firefox ne prend en charge que la syntaxe url() pour le clip-path de clip-path tandis qu'Internet Explorer (et Edge) n'offre aucun support.

Couper et Masquer Exemples Liés