Origem da máscara - CSS-Tricks

O mask-originespecifica a área de posição da máscara de uma imagem da camada de máscara. Em outras palavras, ele define onde está a origem da imagem da camada de máscara, se é a borda da borda, preenchimento ou caixa de conteúdo.

.element ( mask-image: url(star.svg); mask-origin: content-box; )

Para elementos renderizados como uma única caixa, mask-originespecifica a área de posicionamento da máscara. Para elementos renderizados como caixas múltiplas (por exemplo, caixas embutidas em várias linhas, caixas em várias páginas), a propriedade especifica em quais caixas box-decoration-breakoperam para determinar a área de posicionamento da máscara.

Esta propriedade funciona como a background-originpropriedade, exceto por ter um valor inicial diferente e três valores adicionais que se aplicam a elementos SVG.

Na demonstração a seguir, você pode alterar a origem da imagem da camada de máscara. Existe a mesma imagem embaixo para mostrar o efeito de mascarar melhor e marcar as áreas de borda e preenchimento:

Sintaxe

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

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 e o elemento.
Herdado: não
Tipo de animação: discreto

Valores

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Definições de valor

content-box: A posição é relativa à caixa de conteúdo. A origem do mask-imageé posicionada no canto superior esquerdo da borda do conteúdo.
padding-box: A posição é relativa à caixa de preenchimento. A origem da imagem da máscara 0 0está posicionada no canto superior esquerdo da borda de preenchimento, 100% 100%é o canto inferior direito.
border-box: O valor padrão, que define a posição em relação à caixa da borda.
margin-box: A posição é relativa à caixa de margem
fill-box: A posição é relativa à caixa delimitadora do objeto
stroke-box: A posição é relativa à 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 e a dimensão da caixa de referência é definida para os valores widthe heightdo viewBoxatributo.
initial: Aplica a configuração padrão da propriedade, que éborder-box
inherit: Adota o mask-originvalor do pai.
unset: Remove a corrente mask-origindo elemento.

Usando vários valores

Esta propriedade pode usar uma lista de valores separados por vírgulas para origens de máscara, onde 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 origem da primeira imagem, o segundo valor especifica a origem da segunda imagem e assim por diante.

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

Notas

Para elementos SVG sem caixa associada layout CSS, os valores content-box, padding-boxe border-boxcompute a fill-box.
Para elementos com caixa CSS associada layout, os valores fill-box, stroke-boxe view-boxde computação para o initialvalor do mask-originque é border-box.

Demo

Quando temos a imagem da camada de máscara repetida, a primeira instância é posicionada no canto superior esquerdo da área de posicionamento especificada e, em seguida, é repetida a partir daí de acordo com o valor da mask-repeatpropriedade.

Altere o valor de mask-originna seguinte demonstração para ter uma ideia melhor do que está acontecendo: