Máscara-clipe - CSS-Tricks

Anonim

A mask-clippropriedade CSS faz parte da especificação CSS Masking Module Nível 1 e define a área de pintura da máscara. Ele literalmente corta a área de fundo de um elemento e define quais áreas aparecem através da máscara: borda, preenchimento ou caixa de conteúdo. É como colocar a moldura em uma foto, mostrando apenas as partes da foto que não estão cobertas pela moldura. Apenas, neste caso, estamos definindo o que é cortado usando os valores do CSS Box Model.

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

Isso funciona como a background-clippropriedade, exceto por ter três valores adicionais que se aplicam a elementos SVG. Na demonstração a seguir, você pode alterar a área de pintura da máscara usando esta propriedade. Existe a mesma imagem embaixo para mostrar o efeito de mascarar melhor e marcar as áreas de borda e preenchimento:

Sintaxe

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Valor inicial: border-box
  • Aplica-se a: todos os elementos. Em SVG, ele se aplica a elementos de contêiner, excluindo o elemento, todos os elementos gráficos.
  • Herdado: não
  • Tipo de animação: discreto

Valores

/* 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: O conteúdo pintado é cortado na caixa da borda. (Valor padrão)
  • content-box: O conteúdo pintado é recortado na caixa de conteúdo.
  • fill-box: O conteúdo pintado é recortado na caixa delimitadora do objeto.
  • margin-box: O conteúdo pintado é recortado na caixa de margem.
  • padding-box: O conteúdo pintado é preso à caixa de preenchimento.
  • stroke-box: O conteúdo pintado é recortado na caixa delimitadora do traço.
  • view-box: Usa a janela de visualização SVG mais próxima como caixa de referência. Se um viewBoxatributo for especificado para o elemento de criação da janela de visualização SVG:
    • A caixa de referência é posicionada na origem do sistema de coordenadas estabelecido pelo viewBoxatributo.
    • A dimensão da caixa de referência é definida para os valores widthe heightdo viewBoxatributo.
  • no-clip: O conteúdo pintado não é cortado.
  • initial: Aplica a configuração padrão da propriedade, que é border-box.
  • inherit: Adota o mask-clipvalor do pai.
  • unset: Remove a corrente mask-clipdo elemento.

Notas

  • Para elementos SVG sem caixa de layout CSS associado, os valores content-box, padding-boxcompute para fill-boxe para border-boxe margin-boxde computação para stroke-box.
  • Para elementos com a caixa de layout CSS associada, os valores fill-boxcalculam para content-boxe para stroke-boxe view-boxcalculam para o valor inicial mask-clipque é border-box.

Usando vários valores

Esta propriedade pode receber uma lista de valores separados por vírgulas para clipes de máscara e cada valor é aplicado a uma imagem de camada de máscara correspondente especificada na mask-imagepropriedade. No exemplo a seguir, o primeiro valor especifica a área de pintura da máscara da primeira imagem, o segundo valor especifica a área de pintura da máscara da segunda imagem e assim por diante.

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

Demo

Suporte de navegador

IE Beira Raposa de fogo cromada Safári Ópera
Não 79+ 53+ Todo 4+ 15+
Android Chrome Android Firefox Navegador Android iOS Safari Opera Mobile
Todo Todo Todo Todo 59+
Fonte: caniuse

Mais Informações

Artigo em 6 de novembro de 2016

Recorte e mascaramento em CSS

Mojtaba Seyedi