Exemplo
Alterar a cor de todas as imagens para preto e branco (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Dica: Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade filtro define efeitos visuais (like blur and saturation) para um elemento (often <img>) .
| Valor padrão: | Nenhum |
|---|---|
| Herdado: | no |
| Animatable: | yes. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.WebkitFilter="grayscale(100%)" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser 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 | 9.1 6.0 -webkit- | 15,0 -webkit- |
Nota: Older versões do Internet Explorer (4.0 to 8.0) apoiou um não-padrão "filter" propriedade que foi preterido. Este foi usado principalmente para a opacidade quando necessário apoio do IE8 e para baixo.
CSS Syntax
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();Dica: Para usar vários filtros, separe cada filtro com um espaço (See "More Examples" below) .
Funções de filtro
Nota: Os filtros que usam valores percentuais (ie 75%) , também aceitam o valor como decimal (ie 0.75) .
| Filtro | Descrição | Jogue |
|---|---|---|
| none | Valor padrão. Especifica sem efeitos | Jogue " |
| 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. | Jogue " |
| brightness( % ) | Ajusta o brilho da imagem. 0% fará com que a imagem completamente preta. 100% (1) é padrão e representa a imagem original. Valores acima de 100% irá fornecer resultados mais brilhantes. | Jogue " |
| contrast( % ) | Ajusta o contraste da imagem. 0% fará com que a imagem completamente preta. 100% (1) é padrão e representa a imagem original. Valores acima de 100% irá fornecer resultados com menos contraste. | Jogue " |
| 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 para o lado esquerdo da imagem. v-sombra - Obrigatório. Especifica um valor de pixel para a sombra vertical. Os valores negativos colocar a sombra acima da imagem. borrão - Opcional. Este é o terceiro valor, e devem ser 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 (borda da sombra é nítida). 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á mostrar se adicionado. cor - Opcional. Adiciona uma cor para a sombra. Se não for especificado, a cor depende do navegador (often black) . Um exemplo de criação de uma sombra vermelha, que é 8px grande horizontal e verticalmente, com um efeito de borrão de 10px: Filtro: drop-shadow (8px 8px 10px vermelho); Dica: Este filtro é semelhante ao box-shadow propriedade. | Jogue " |
| 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. | Jogue " |
| hue-rotate( deg ) | Aplica-se uma rotação de matiz na imagem. O valor define o número de graus em torno do círculo de cor as amostras de imagem serão ajustados. 0deg é padrão, e representa a imagem original. Nota: O valor máximo é 360deg. | Jogue " |
| 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. | Jogue " |
| 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% é totalmente transparente. 100% (1) é padrão e representa a imagem original (no transparency) . Nota: Os valores negativos não são permitidos. Tip: Este filtro é semelhante à opacidade propriedade. | Jogue " |
| saturate( % ) | Satura a imagem. 0% (0) fará com que a imagem completamente un-saturada. 100% é padrão e representa a imagem original. Valores acima de 100% fornece resultados super-saturada. Nota: Os valores negativos não são permitidos. | Jogue " |
| 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. | Jogue " |
| url() | O url() função leva a localização de um ficheiro XML que especifica um filtro SVG, e pode incluir uma âncora para um elemento de filtro específico. Exemplo: Filtro: url(svg-url#element-id) | |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Exemplo borrão
Aplicar um efeito de borrão na imagem:
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
Exemplo de brilho
Ajustar o brilho da imagem:
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
contraste Exemplo
Ajustar o contraste da imagem:
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
Exemplo sombra
Aplicar um efeito de sombra para a imagem:
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop-shadow(8px 8px 10px red)
Exemplo tons de cinza
Converter a imagem em tons de cinza:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
Hue Exemplo Rotação
Aplicar uma rotação de matiz na imagem:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
Exemplo Invert
Inverta as amostras na imagem:
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
Exemplo opacidade
Definir o nível de opacidade para a imagem:
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
Exemplo saturate
Saturar a imagem:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
Exemplo sepia
Converter a imagem para sépia:
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
Combinando Filtros / Filtros Múltiplos
Para usar vários filtros, separe cada filtro com um espaço.
Nota: A ordem é importante (ie using grayscale() depois de sepia() irá resultar em uma imagem completamente cinza).
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
Todos os Filtros
Uma demonstração de todas as funções de filtro:
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter:
contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter:
grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter:
hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter:
invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter:
opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter:
saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter:
sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter:
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
} Tente você mesmo " Páginas relacionadas
Referência HTML DOM: filter property