Exemplo
Alterar a cor de uma imagem a preto e branco (100% grayscale) :
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
Tente você mesmo " Definição e Uso
A propriedade filtro adiciona efeitos visuais (like blur and saturation) para imagens.
Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente a propriedade.
Números seguidos de Webkit especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| filter | 18,0 Webkit | 13,0 | 35,0 | 6.0 Webkit | 15,0 Webkit |
Nota: Chrome, Safari e Opera apoiar uma alternativa, a propriedade WebkitFilter.
Sintaxe
Devolver a propriedade filtro:
object .style.filterDefina a propriedade filtro:
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
Funções de filtro
Nota: Os filtros que utilizam valores de percentagem (ie 75%) , também aceitar o valor decimal (ie 0.75) .
| Filtro | Descrição |
|---|---|
| Nenhum | Especifica sem efeitos |
| blur( px ) | Aplica-se um efeito de borrão na imagem. Um valor maior vai criar mais borrão. Se nenhum valor for especificado, 0 é usado. |
| brightness( % ) | Ajusta o brilho da imagem. 0% fará com que a imagem completamente preta. 100% (1) é padrão e representa a imagem original. Os valores superiores a 100% irá fornecer resultados mais brilhantes. |
| contrast( % ) | Ajusta o contraste da imagem. 0% fará com que a imagem completamente preta. 100% (1) é padrão e representa a imagem original. Os valores superiores a 100% irá fornecer resultados com menos contraste. |
| drop shadow( h-shadow v-shadow blur spread color ) | Aplica um efeito de sombra à imagem. Valores possíveis: h-sombra - Obrigatório. Especifica um valor de pixel para a sombra horizontal. Os valores negativos colocar a sombra à esquerda da imagem. v-sombra - Obrigatório. Especifica um valor de pixel para a sombra vertical. Os valores negativos colocar a sombra acima da imagem. borrar - Opcional. Este é o terceiro valor, e deve estar em pixels. Acrescenta um efeito de borrão para a sombra. Um valor maior vai criar mais blur (a sombra torna-se maior e mais leve). Os valores negativos não são permitidos. Se nenhum valor for especificado, 0 é usado (a borda da sombra é acentuada). spread - Opcional. Este é o quarto valor, e deve estar em pixels. Os valores positivos farão com que a sombra para expandir e crescer mais, e os valores negativos fará com que a sombra a encolher. Se não for especificado, será 0 (the shadow will be the same size as the element) . Nota: Chrome, Safari e Opera, e talvez outros navegadores, não suportam esta quarta comprimento; não irá processar se adicionado. cor: Opcional. Adiciona uma cor para a sombra. Se não for especificado, a cor depende do navegador (often black) . Dica: Este filtro é semelhante ao box-shadow propriedade. |
| grayscale( % ) | Converte a imagem em tons de cinza. 0% (0) é padrão e representa a imagem original. 100% fará com que a imagem completamente cinza (used for black and white images) . Nota: Os valores negativos não são permitidos. |
| hue- rotate( deg ) | Aplica-se uma rotação de matiz na imagem. O valor define o número de graus em volta do círculo cor das amostras de imagem será ajustada. 0deg é padrão, e representa a imagem original. Nota: O valor máximo é 360deg. |
| invert( % ) | Inverte as amostras na imagem. 0% (0) é padrão e representa a imagem original. 100% fará com que a imagem totalmente invertido. Nota: Os valores negativos não são permitidos. |
| opacity( % ) | Define o nível de opacidade para a imagem. O nível de opacidade descreve o nível de transparência, em que: 0% é completamente transparente. 100% (1) é padrão e representa a imagem original (no transparency) . Nota: Os valores negativos não são permitidos. Dica: Este filtro é semelhante a opacidade propriedade. |
| saturate( % ) | Satura a imagem. 0% (0) fará com que a imagem completamente não-saturado. 100% é padrão e representa a imagem original. Os valores superiores a 100% proporciona resultados super-saturada. Nota: Os valores negativos não são permitidos. |
| sepia( % ) | Converte a imagem para sépia. 0% (0) é padrão e representa a imagem original. 100% fará com que a imagem completamente sépia. Nota: Os valores negativos não são permitidos. |
Detalhes técnicos
| CSS Versão | CSS3 |
|---|
Páginas relacionadas
Referência CSS: filter property
<Estilo de objeto