Propriedade de estilo de filtro

Definição e uso

filtro Atributo para adicionar efeitos visuais às imagens (como desfoque e saturação).

Veja também:

Manual de CSS:Propriedade de filtro

Exemplo

Mudar a cor da imagem para preto e branco (100% de cinza):

document.getElementById("myImg").style.filter = "grayscale(100%)";

Experimente você mesmo

Sintaxe

Retornar propriedade de filtro:

objeto.style.filter

Definir propriedade de filtro:

objeto.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Função Filtro

Comentário：O filtro também aceita valores decimais (por exemplo, 0,75) para valores percentuais (por exemplo, 75%).

Filtro Descrição
none Define sem efeito.
blur(px)

Aplicar efeito de desfoque à imagem. Valores maiores produzem mais desfoque.

Se não for especificado um valor, será usado 0.
brightness(%)

Ajustar a brilho da imagem.

0% tornará a imagem completamente preta.

100% (1) é o valor padrão, representando a imagem original.

Valores acima de 100% fornecerão resultados mais brilhantes.
contrast(%)

Ajustar o contraste da imagem.

0% tornará a imagem completamente preta.

100% (1) é o valor padrão, representando a imagem original.

Valores acima de 100% fornecerão resultados de contraste mais baixos.
drop-shadow(h-shadow v-shadow blur spread color)

Aplicar efeito de projeção na imagem.

Valores possíveis：

h-shadow - obrigatório. Especificar o valor de pixels do efeito de sombra horizontal. Valores negativos colocam a sombra à esquerda da imagem.

v-shadow - obrigatório. Especificar o valor de pixels do efeito de sombra vertical. Valores negativos colocam a sombra acima da imagem.

blur - opcional. Terceiro valor, em pixels. Adicionar efeito de borrão à sombra. Valores maiores produzirão mais borrão (a sombra ficará maior e mais brilhante). Não são permitidos valores negativos. Se não for especificado um valor, será 0 (a borda da sombra será nítida).

spread - opcional. Quarto valor, em pixels. Valores positivos farão a sombra expandir e aumentar, valores negativos farão a sombra diminuir. Se não for especificado, será 0 (a sombra será do tamanho do elemento).

Comentário：Chrome, Safari e Opera, possivelmente outros navegadores, não suportam o quarto comprimento; se adicionado, não será exibido.

color：opcional. Adicionar cor ao efeito de sombra. Se não for especificado, a cor depende do navegador (normalmente preto).

Dica：Este filtro é semelhante à propriedade de box-shadow.
grayscale(%)

Converter a imagem para tons de cinza.

0% (0) é o valor padrão, representando a imagem original.

100% tornará a imagem completamente cinzenta (usado para imagens em preto e branco).

Comentário：Não é permitido valor negativo.
hue-rotate(deg)

Aplicar rotação de tom na imagem. Este valor define os graus ao redor do círculo de cores que os amostras da imagem serão ajustados.

0deg é o valor padrão, representando a imagem original.

Comentário：O valor máximo é de 360 graus.
invert(%)

Inverter os amostras na imagem.

0% (0) é o valor padrão, representando a imagem original.

100% tornará a imagem completamente invertida.

Comentário：Não é permitido valor negativo.
opacity(%)

Definir o nível de opacidade da imagem. O nível de opacidade descreve o nível de transparência, onde:

0% é completamente transparente.

100% (1) é o valor padrão, representando a imagem original (sem transparência).

Comentário：Não é permitido valor negativo.

Dica：Este filtro é semelhante à propriedade de opacidade.
saturate(%)

Ajustar a saturação da imagem.

0% (0) tornará a imagem completamente insaturada.

100% é o valor padrão, representando a imagem original.

Valores acima de 100% fornecerão resultados super-saturados.

Comentário：Não é permitido valor negativo.
sepia(%)

Converter a imagem para marrom-avermelhada.

0% (0) é o valor padrão, representando a imagem original.

100% tornará a imagem completamente marrom-avermelhada.

Comentário：Não é permitido valor negativo.

Detalhes técnicos

Versão do CSS: CSS3

Suporte do navegador

Os números na tabela indicam a versão do navegador que suporta plenamente essa propriedade.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0