Tamanho da máscara - CSS-Tricks

Anonim

Em CSS, a propriedade mask-size especifica o tamanho de uma imagem da camada de máscara. Em muitos aspectos, funciona de maneira muito semelhante à background-sizepropriedade.

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

O mascaramento permite que você exiba partes selecionadas de um elemento enquanto oculta o resto. O tamanho da máscara é definido pela mask-sizepropriedade.

Na demonstração a seguir, você pode brincar com o tamanho da imagem da camada de máscara:

Sintaxe

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Valor inicial: auto
  • Aplica-se a: Todos os elementos. Em SVG, aplica-se a elementos de contêiner, excluindo o elemento, todos os elementos gráficos e o elemento
  • Herdado: não
  • Tipo de animação: lista repetível

Isso basicamente quer dizer que a sintaxe aceita um valor de tamanho de fundo ( ) que pode ter um ou dois comprimentos e / ou porcentagens ( ), definido como autoou uma das duas palavras-chave ( covere contain).

  • Quando dois valores são usados, o primeiro valor especifica a largura da imagem da máscara e o segundo valor especifica sua altura .
  • Quando um valor que não é contido ou coberto é usado, ele define a largura da imagem da máscara e a altura é assumida como auto.

Valores

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

Definições de valor

  • : Qualquer comprimento CSS válido e não negativo, como px, em, reme %, entre outros.
  • : Especifica o tamanho da imagem da camada de máscara como um valor percentual em relação à área de posicionamento da máscara, que é definido pelo valor de mask-origin. Por padrão, este valor é border-box, o que significa que contém bordas, preenchimento e conteúdo da caixa.
  • auto: A altura e largura intrínsecas da imagem da máscara são usadas e, para imagens como gradientes que não têm dimensões intrínsecas, são renderizadas no tamanho da área de posicionamento da máscara.
  • contain: Dimensiona a imagem da máscara enquanto preserva sua proporção intrínseca de forma que sua largura e altura possam caber dentro da área de posicionamento da máscara. Para imagens como gradientes que não têm dimensões intrínsecas, ele é renderizado no tamanho da área de posicionamento da máscara.
  • cover: Dimensiona a imagem da máscara enquanto preserva sua proporção intrínseca de forma que sua largura e altura possam cobrir totalmente a área de posicionamento da máscara. Para imagens como gradientes que não têm dimensões intrínsecas, ele é renderizado no tamanho da área de posicionamento da máscara.
  • initial: Aplica a configuração padrão da propriedade, que é auto.
  • inherit: Adota o valor do tamanho da máscara do pai.
  • unset: Remove a corrente mask-sizedo elemento.

Usando vários valores

Esta propriedade pode receber uma lista de valores separados por vírgulas para tamanhos 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 o tamanho da primeira imagem, o segundo valor especifica o tamanho da segunda imagem e assim por diante.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

O autovalor

Se o valor da mask-sizepropriedade for especificado como auto, desta forma:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

… Então, a imagem da máscara é dimensionada nas direções correspondentes para manter sua proporção de aspecto. Dito isso, podemos obter vários resultados dependendo das dimensões e proporções intrínsecas da imagem.

Proporção / Dimensão Sem dimensões intrínsecas Uma dimensão intrínseca Ambas as dimensões intrínsecas
Tem proporção Renderizado como se contivesse tivesse sido especificado ao invés Renderizado no tamanho determinado por aquela dimensão e a proporção Renderizado nesse tamanho
Sem Proporção Renderizado no tamanho da área de posicionamento da máscara Renderizado usando a dimensão intrínseca e a dimensão correspondente da área de posicionamento da máscara N / D

Se o valor de mask-sizefor especificado com autoe outro valor não automático como o seguinte:

.element ( mask-size: auto 200px; )

… então:

  • se a imagem tem uma proporção intrínseca , o valor automático é calculado usando a dimensão especificada e a proporção intrínseca.
  • se a imagem não tiver proporção intrínseca , o valor auto torna-se a dimensão intrínseca correspondente da imagem se existir e, se não existir, auto será a dimensão correspondente da área de posicionamento da máscara.

Entendendo coverecontain

O vídeo a seguir explica como as palavras-chave de conteúdo e cobertura funcionam. Observe que a posição inicial de uma camada de máscara está no centro da área de posicionamento:

Se a imagem não tiver proporção intrínseca, a especificação de cover ou contain renderiza a imagem da máscara no tamanho da área de posicionamento da máscara.

E o que diabos é uma dimensão intrínseca e proporção intrínseca?

As dimensões intrínsecas são a largura e a altura de um elemento e a proporção intrínseca é a proporção delas.

  • Uma imagem bitmap, como um formato PNG, sempre tem dimensões intrínsecas e uma proporção intrínseca.
  • Uma imagem vetorial, como o formato SVG, pode ter ambas as dimensões intrínsecas. Portanto, também tem uma proporção intrínseca. Também pode ter uma ou nenhuma dimensão intrínseca e, em ambos os casos, pode ou não ter uma proporção intrínseca.
  • Os gradientes são como imagens sem dimensões intrínsecas ou proporção intrínseca.

Suporte de navegador

IE Beira Raposa de fogo cromada Safári Ópera
Não 18+ 53+ Todo 4+ 70
Android Chrome Android Firefox Navegador Android iOS Safari Opera Mini
85+ 79+ 4,4+ Todo Todo
Fonte: caniuse

Demo

A demonstração a seguir usa um comprimento para o tamanho da máscara. Tente alterar o valor para outros tipos de valores no código e verifique o resultado.

Mais Informações

  • Módulo de Mascaramento CSS Nível 1
  • Recorte e mascaramento em CSS
  • Recorte vs. Mascaramento: quando usar cada um
  • Nº 185: Brincando com máscaras CSS (vídeo)