CSS Alterar a cor da imagem
Implementaremos os vários exemplos dessas funções que a propriedade CSS Filter fornece em um arquivo HTML.
Exemplo 1: Usando a propriedade do filtro com a função invertida para estilizar uma imagem em um arquivo html
Neste exemplo, usaremos a função invertida da propriedade do filtro, que inverte todos os valores da amostra de uma imagem. A função invertida pode aceitar todos os valores positivos para o grau de inversão e apenas os valores negativos não são aceitos. Esta função da propriedade do filtro pode alterar sozinho a cor de uma imagem.
Neste script, começamos abrindo o cabeçalho do arquivo para criar uma classe de estilo para o elemento de imagem da página HTML. No estilo sob o nome de "imagem", criamos uma classe em que definimos a propriedade junto com sua função que muda a cor da imagem. Em seguida, fechamos a tag de estilo e o cabeçalho do arquivo. Depois disso, abrimos a etiqueta do corpo, onde damos um título usando a tag "H2". A primeira imagem é a imagem colorida original e não possui propriedades de estilo, enquanto a segunda imagem é a mesma que a primeira, mas com o estilo e a classe adicionados à sua tag. Adicionamos as imagens no arquivo através do caminho do arquivo usando a palavra -chave "SRC". Depois de fechar a tag de imagem, terminamos o arquivo fechando o corpo e a tag html. Salvamos o arquivo no formato adequado para que possamos acessá -lo em nosso navegador e receber os seguintes resultados:
Como podemos ver na saída anterior, a imagem à esquerda tem todas as cores corretas, enquanto a imagem à direita tem as cores invertidas e foi transformada em uma imagem diferente.
Exemplo 2: Usando a propriedade Filter com a função Sepia para estilizar uma imagem em um arquivo HTML
Neste exemplo, usamos a função sépia da propriedade do filtro para alterar todas as cores em uma imagem para uma cor amarela marrom ou clara quente. A função Sepia aceita todos os valores positivos de conversão de cores e rejeita apenas os valores negativos. Esta função de propriedade do filtro tem a capacidade de modificar a cor de uma imagem por conta própria. Dentro da etiqueta de estilo de um arquivo html, criaremos uma classe de estilo exclusiva para o elemento de imagem.
Neste script, começamos acessando o cabeçalho do arquivo para criar uma classe de estilo para o elemento de imagem da página HTML. Na tag de estilo, construímos uma classe onde definimos a propriedade e seu método, que altera a cor da imagem. A etiqueta de estilo e o cabeçalho do arquivo serão fechados. Depois disso, abrimos a etiqueta corporal e inserimos um título usando a tag "H2". Em seguida, usando o elemento "IMG", colocamos as duas imagens em nossa tela. A primeira imagem é a imagem colorida original sem características de estilo, enquanto a segunda imagem é a mesma que a primeira, mas com a classe de estilo incluída em sua tag. Usando a palavra -chave "SRC", inserimos as fotos no arquivo através do caminho do arquivo.
Como mostrado na saída anterior, a imagem à esquerda tem todas as cores corretas. No entanto, o da direita tem as cores variadas.
Exemplo 3: Usando a propriedade Filter com a função em escala de cinza para estilizar uma imagem em um arquivo HTML
Neste exemplo, utilizaremos o recurso de filtro em escala de cinza para converter todas as cores em uma foto em preto, branco e cinza. Esta função de propriedade do filtro pode alterar a cor de uma fotografia e transformá -la em uma imagem em escala de cinza. Desenvolveremos uma aula de estilo exclusiva para o elemento de imagem na etiqueta de estilo de um arquivo html.
Neste script, primeiro inserimos o cabeçalho do arquivo para gerar uma classe de estilo para o elemento de imagem da página HTML. Definimos a propriedade e o método para alterar a cor da imagem em uma classe. A etiqueta de estilo e o cabeçalho do arquivo serão fechados. Em seguida, abrimos a etiqueta corporal e inserimos um título usando a tag "H2". Em seguida, usamos o elemento "IMG" para exibir as duas imagens em nossa tela. A primeira imagem não tem recursos de estilo, enquanto a segunda imagem é a mesma que a primeira, mas com a classe de estilo adicionada à sua tag. Inserimos as fotografias no arquivo usando a palavra -chave "SRC" e o caminho do arquivo.
A imagem à esquerda contém todas as cores originais, como mostrado na saída anterior. No entanto, o da direita tem tons distintos.
Exemplo 4: Usando a propriedade do filtro com a opacidade e as funções de sombra de soltar para estilizar uma imagem em um arquivo html
Neste exemplo, usaremos a opacidade da propriedade do filtro e as funções de sombra soltar para alterar todas as cores em uma foto. Esta função de propriedade do filtro altera a cor de uma fotografia e a converte em uma nova imagem.
Neste script, primeiro adicionamos o cabeçalho do arquivo para produzir uma classe de estilo para o elemento de imagem na página HTML. Definimos a propriedade e o método para alterar a cor da imagem em uma classe. A etiqueta de estilo e o cabeçalho do arquivo serão fechados. Em seguida, abrimos a etiqueta corporal e usamos a tag "H2" para inserir um título. O elemento "IMG" é então usado para exibir as duas imagens em nossa tela. A primeira imagem não tem características de estilo, enquanto a segunda imagem é idêntica à primeira, mas com a classe de estilo adicionada à sua tag. Inserimos imagens no arquivo usando a palavra -chave "SRC" e o caminho do arquivo. Fechamos o corpo e os elementos HTML quando fechamos a tag de imagem.
A foto à esquerda contém todas as cores originais, enquanto a à direita mudou os tons, conforme indicado na saída anterior.
Conclusão
Discutimos os vários métodos sobre a mudança da cor de uma imagem em um arquivo HTML usando CSS. A propriedade CSS mais usada é a propriedade de filtro que tem funções distintas predefinidas que podem alterar a cor de uma imagem e pode dar uma aparência transformada. Implementamos várias dessas funções no ambiente do bloco de notas ++ para entender melhor como essa propriedade funciona com funções distintas.