CSS3 filtro (filtro) propriedades
Exemplos
Editar todas as cores em imagens a preto e branco (100% cinza):
-webkit-filtro: tons de cinza (100% ); / * Chrome, Safari, Opera * /
Filtro: escala de cinza (100%);
}
tente »
Definições e uso
atributo de filtro define os elementos (tipicamente <img>) efeitos visuais (por exemplo: distorcido e saturação).
padrão: | nenhum |
---|---|
herança: | não |
suporte de Animação: | Sim. Detalhes podem ser encontrados no CSS Animação |
versão: | CSS3 |
sintaxe JavaScript: | objeto .style.WebkitFilter = "tons de cinza (100%)" para tentar >> |
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão do método.
Imediatamente após o número de prefixo o navegador especificado -webkit-.
propriedade | |||||
---|---|---|---|---|---|
filtro | 18,0 -webkit- | Não suporta | 35,0 | 6.0 -webkit- | 15,0 -webkit- |
Nota: navegador Explorador Older Internet (4,0 a 8,0) para apoiar a não-padrão "filtro" propriedade foi abandonada. IE8 e navegadores anteriores costumam usar opacidade propriedade.
CSS Syntax
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Dica: Use espaços para separar vários filtros.
função de filtro
Nota: Os filtros utilizam tipicamente percentagem (por exemplo: 75%), é claro, também podem ser usados para representar um número decimal (por exemplo: 0,75).
filtro | descrição |
---|---|
nenhum | O valor padrão, nenhum efeito. |
blur (px) | Gaussian Blur com as configurações de imagem. "Radius" para definir um valor de função Gaussian padrão é pobre, ou o número de pixels na tela para derreter juntos, então quanto maior o valor, mais desfocada; Se o valor não for definido, o padrão é 0, o parâmetro pode ser definido valor de comprimento css, mas não aceita valores percentuais. |
brilho (%) | Aplicação de uma multiplicação linear para a imagem para torná-la mais clara ou mais escura. Se o valor for 0%, a imagem é tudo preto. O valor é de 100%, sem alteração na imagem. Outros valores correspondem a linear efeito multiplicador. Valor de mais de 100% são possíveis, a imagem será mais brilhante do que o original. Se o valor não for definido, o padrão é 1. |
contraste (%) | Ajustar o contraste da imagem. O valor é de 0%, a imagem é tudo preto. O valor é de 100%, a imagem inalterada. Os valores podem exceder 100%, o que significa que irá utilizar um menor contraste. Se o valor não for definido, o padrão é 1. |
drop-shadow (h-sombra v -shadow borrão propagação cor) | Configurar um efeito de sombra à imagem. As sombras são sintetizados na imagem abaixo, pode haver ambiguidade, uma cor específica pode desenhar a máscara diagrama versão offset. Função aceita <sombra> valor (definido no fundo CSS3) tipo, além de "inserção" palavra-chave não é permitido. A função com a propriedade box-shadow box-shadow existente é muito semelhante, exceto que, através do filtro, alguns navegadores para um melhor desempenho fornece aceleração de hardware.
|
em tons de cinza (%) | Converter a imagem em tons de cinza. Ele define o valor da taxa de conversão. Valor de 100% é completamente convertido para uma imagem em tons, um valor de 0% da imagem inalterada. Os valores entre 0% e 100%, o efeito multiplicador é linear. Se não for definido, o valor padrão é 0; |
matiz-rotação (deg) | Aplicação à rotação da imagem matiz. imagem "Angle" ângulo anel de cor é um valor valor ajustado ajustado. Valor 0deg, a mudança de imagem. Se o valor não for definido, o valor padrão é 0deg. Embora não haja nenhum valor máximo que excede o valor do equivalente de outro 360deg perímetro. |
inverter (%) | Invertendo imagem de entrada. Ele define o valor da taxa de conversão. 100% do valor é completamente invertida. Um valor de 0%, a imagem inalterada. Um valor entre 0% e 100%, o efeito multiplicador é linear. Se o valor não for definido, o valor padrão é 0. |
opacidade (%) | grau de conversão de transparência da imagem. Ele define o valor da taxa de conversão. 0% é completamente transparente, e um valor de 100%, a imagem inalterada. Um valor entre 0% e 100%, o efeito multiplicador é linear, multiplicado pelo número de amostras é também equivalente à imagem. Se o valor não for definido, o valor padrão é 1. Esta função é muito semelhante à propriedade opacidade existente, excepto que através do filtro, a fim de melhorar o desempenho de alguns navegadores irá fornecer aceleração de hardware. |
saturar (%) | Converte a saturação da imagem. Ele define o valor da taxa de conversão. 0% é totalmente insaturado, nenhuma mudança na imagem é de 100%. Outro valor, o efeito multiplicador é linear. Mais do que 100% do valor é permitido, existe uma saturação mais elevada. Se o valor não for definido, o valor padrão é 1. |
sépia (%) | Converter a imagem para sépia. Ele define o valor da taxa de conversão. Valor de 100% é totalmente castanho escuro, é 0% da imagem inalterada. Os valores entre 0% e 100%, o efeito multiplicador é linear. Se não for definido, o valor padrão é 0; |
url () | função URL leva um arquivo XML, que define um filtro SVG, e pode incluir uma âncora para especificar um elemento de filtro específico. Por exemplo: filter: url(svg-url#element-id) |
inicial | Propriedade é definida para os valores padrão, consulte: a palavra-chave inicial CSS |
herdar | Esta propriedade é herdada do elemento pai, você pode ver: o CSS a palavra-chave herdar |
mais exemplos
exemplos distorcido
Fotos Gaussian Blur:
-webkit-filtro: blur (5px) ; / * Chrome, Safari, Opera * /
Filtro: blur (5px);
}
tente »
Instância Função Brilho
Faça o mais brilhante de imagens:
-webkit-filtro: brilho (200% ); / * Chrome, Safari, Opera * /
Filtro: brilho (200%);
}
tente »
Instância função de contraste
Ajustar o contraste da imagem:
-webkit-filtro: contraste (200% ); / * Chrome, Safari, Opera * /
Filtro: contraste (200%);
}
tente »
exemplos de função drop-sombra
Configurar um efeito de sombra para a imagem:
-webkit-filtro: drop-shadow ( 8px 8px 10px vermelho); / * Chrome, Safari, Opera * /
Filtro: drop-shadow (8px 8px 10px vermelho);
}
tente »
Instância Função tons de cinza
Converter a imagem em tons de cinza:
-webkit-filtro: tons de cinza (50% ); / * Chrome, Safari, Opera * /
Filtro: tons de cinza (50%);
}
tente »
() exemplos função Matiz-rotação
Aplicações de rotação de tonalidade para a imagem:
-webkit-filtro: matiz-rotação ( 90deg); / * Chrome, Safari, Opera * /
Filtro: matiz-rotação (90deg) ;
}
tente »
Instância Função Invert
Invertendo imagem de entrada:
-webkit-filtro: invertido (100% ); / * Chrome, Safari, Opera * /
Filtro: invertido (100%);
}
tente »
Instância Função opacidade
grau de conversão de transparência da imagem:
-webkit-filtro: opacidade (30% ); / * Chrome, Safari, Opera * /
Filtro: opacidade (30%);
}
tente »
Saturar Instância Função
Convertendo a saturação da imagem:
-webkit-filtro: saturar (800% ); / * Chrome, Safari, Opera * /
Filtro: saturar (800%);
}
tente »
Instância Função Sepia
Converter imagens para sépia:
-webkit-filtro: sépia (100% ); / * Chrome, Safari, Opera * /
Filtro: sépia (100%);
}
tente »
função composta
O uso de vários filtros, cada um dos filtros separados por espaços.
Nota: A ordem é muito importante (por exemplo, usando tons de cinza () antes de usar sépia () irá produzir a imagem da escala cinza completa).
-webkit-filtro: contraste (200% ) de brilho (150%); / * Chrome, Safari, Opera * /
Filtro: contraste (200%) de brilho (150%);
}
tente »
Todos os exemplos de filtro
O exemplo a seguir demonstra como usar todo o filtro:
-webkit-filtro: blur (4px) ;
Filtro: blur (4px);
}
.brightness {
-webkit-filtro: brilho (0,30) ;
Filtro: brilho (0,30);
}
.contrast {
-webkit-filtro: contraste (180% );
Filtro: contraste (180%);
}
.grayscale {
-webkit-filtro: tons de cinza (100% );
Filtro: escala de cinza (100%);
}
.huerotate {
-webkit-filtro: matiz-rotação ( 180 °);
Filtro: matiz-rotação (180 °) ;
}
.invert {
-webkit-filtro: invertido (100% );
Filtro: invertido (100%);
}
.opacity {
-webkit-filtro: opacidade (50% );
Filtro: opacidade (50%);
}
.saturate {
-webkit-filtro: saturar (7) ;
Filtro: saturar (7);
}
.sepia {
-webkit-filtro: sépia (100% );
Filtro: sépia (100%);
}
.Shadow {
-webkit-filtro: drop-shadow ( 8px 8px 10px verde);
Filtro: drop-shadow (8px 8px 10px verde);
}
tente »
artigos relacionados
HTML DOM Referência: atributos de estilo do filtro