CSSRecorte y enmascaramiento


Sintaxis

  • Recorte
  • ruta de clip: <clip-source> | [<basic-shape> || <clip-geometry-box>] | ninguna
  • Enmascaramiento
  • máscara-imagen: [ninguno | <referencia de máscara>] #
  • modo de máscara: [<modo de máscara>] #
  • repetición de máscara: [<estilo de repetición] #
  • posición de la máscara: [<posición>] #
  • máscara-clip: [<geometry-box> | no hay video ]#
  • origen de la máscara: [<geometry-box>] #
  • tamaño de máscara: [<tamaño_gg>] #
  • compuesto de máscara: [<compositing-operator>] #
  • máscara: [<mask-reference> <masking-mode>? || <position> [/ <bg-size>]? || <repeat-style> || <geometry-box> || [<geometry-box> | sin clip] || <compositing-operator>] #

Parámetros

Parámetro Detalles
fuente de clip Una URL que puede apuntar a un elemento SVG en línea (o) un elemento SVG en un archivo externo que contiene la definición de la ruta del clip.
forma básica Se refiere a uno entre inset() , circle() , ellipse() o polygon() . Usando una de estas funciones se define el trazado de recorte. Estas funciones de forma funcionan exactamente de la misma forma que en Formas para flotadores
clip-geometría-caja Esto puede tener uno entre content-box , content-box padding-box border-box margin-box fill-box stroke-box view-box como valores. Cuando esto se proporciona sin ningún valor para <basic-shape>, los bordes del cuadro correspondiente se utilizan como la ruta para recortar. Cuando se usa con una <forma básica>, esto actúa como el cuadro de referencia para la forma.
mascara-referencia Esto puede ser none o una imagen o una URL de referencia a una fuente de imagen de máscara.
estilo de repetición Esto especifica cómo se debe repetir o colocar la máscara en los ejes X e Y. Los valores admitidos son repeat-x , repeat-y , repeat , space , round , no-repeat .
modo de máscara Puede ser alpha o luminance o auto e indica si la máscara debe tratarse como una máscara alfa o una máscara de luminancia. Si no se proporciona ningún valor y la referencia de la máscara es una imagen directa, se consideraría una máscara alfa (o) si la referencia de la máscara es una URL, se consideraría una máscara de luminancia.
posición Esto especifica la posición de cada capa de máscara y es similar en comportamiento a la propiedad de background-position . El valor se puede proporcionar en la sintaxis de 1 valor (como top , 10% ) o en la sintaxis de 2 valores (como top right , 50% 50% ).
caja de geometría Esto especifica el cuadro en el que se debe recortar la máscara ( área de pintura de máscara ) o el cuadro que se debe utilizar como referencia para el origen de la máscara ( área de posicionamiento de máscara ) según la propiedad. La lista de valores posibles es content-box padding-box border-box margin-box fill-box stroke-box view-box . La explicación detallada de cómo funciona cada uno de esos valores está disponible en la especificación W3C .
tamaño bg Esto representa el tamaño de cada capa de imagen de máscara y tiene la misma sintaxis que background-size . El valor puede ser longitud o porcentaje o auto o cubrir o contener. La longitud, el porcentaje y el auto pueden proporcionarse como un solo valor o como uno para cada eje.
operador de composición Puede ser cualquiera entre add , subtract , exclude , multiply por capa y define el tipo de operación de composición que se debe usar para esta capa con las que están debajo. La explicación detallada sobre cada valor está disponible en las especificaciones del W3C .

Observaciones

CSS Clipping y Masking son conceptos muy nuevos, por lo que el soporte del navegador para estas propiedades es bastante bajo.

Mascarillas

Al momento de escribir (Jul '16), Chrome, Safari y Opera admiten estas propiedades con el prefijo -webkit- .

Firefox no requiere prefijos, pero admite máscaras solo cuando se usa con elementos de mask SVG. Para los elementos de mask SVG en línea, la sintaxis es mask: url(#msk) mientras que para el uso de elementos de mask en un archivo SVG externo, mask: url('yourfilepath/yourfilename.svg#msk') . #msk en ambos casos se refiere al id del elemento de mask que se hace referencia. Como se indica en esta respuesta , en la actualidad, Firefox no admite ningún parámetro que no sea mask-reference a la mask en la propiedad de la mask .

Internet Explorer (y Edge) aún no ofrece soporte para esta propiedad.

La propiedad del mask-mode actualmente no es compatible con ningún navegador con o sin prefijos.

Recorrido del clip:

Como en el momento de escribir (Jul '16) Chrome, Safari y Opera son compatibles clip-path cuando la ruta se crea utilizando formas básicas (como circle , polygon ) o la sintaxis url(#clipper) con SVG en línea. No admiten el recorte basado en formas que forman parte de archivos SVG externos. Además, requieren que el prefijo -webkit esté presente.

Firefox solo admite la sintaxis url() para clip-path mientras que Internet Explorer (y Edge) no ofrecen soporte.

Recorte y enmascaramiento Ejemplos relacionados