Aqui estão os resultados deste artigo:
Vamos começar!
Alterar a cor da imagem em CSS
Para alterar a cor da imagem em CSS, primeiro conheça a propriedade filter e suas funções. Você obterá uma melhor compreensão desta forma.
filtrar propriedade CSS
Para controlar o efeito visual de uma propriedade de filtro de imagem do CSS é usada. Os efeitos visuais são:
- borrão
- brilho
- ajuste de cor
- sombra
- opacidade
Sintaxe da propriedade do filtro
A sintaxe da propriedade do filtro é:
filtro : borrão ( ) | sombra ( ) | opacidade ( )- borrão(): usado para aplicar o efeito de desfoque na imagem.
- drop-shadow(): criar uma sombra sobre uma imagem.
- opacidade(): usado para adicionar transparência à imagem.
Podemos usar vários filtros usando essa propriedade de filtro. Este artigo é sobre como alterar a cor da imagem, então aqui vamos explicar como usar as funções drop-shadow() e opacity() com ela.
sombra ()
drop-shadow() é uma função interna do CSS que permite definir sombra para qualquer elemento ou imagem. Os seguintes parâmetros são usados na função drop-shadow() para alterar a cor de uma imagem:
- offset-x: É usado para adicionar sombra horizontal.
- offset-y: As sombras são adicionadas verticalmente usando isso.
- cor: As sombras são coloridas com este parâmetro.
Para esclarecer esses pontos, vamos para a sintaxe do drop-shadow:
sombra ( offset-x offset-y cor )- offset-x e offset-y podem ser positivos ou negativos.
- Na horizontal, o valor positivo é usado para somar os efeitos do lado direito e o negativo é para o lado esquerdo.
- Na vertical, o valor positivo é para o lado inferior e o negativo é para o topo.
- No lugar da cor, você pode atribuir qualquer cor que queira dar à imagem.
opacidade()
opacity() é usado para adicionar transparência a um elemento ou qualquer imagem. A sintaxe da opacidade() é:
opacidade ( número ) ;Aqui “ número ” eu s usado para definir o nível de opacidade entre 0,0 e 1,0. Para tornar uma imagem totalmente transparente, você pode defini-la como 0.0.
Para esclarecer os pontos de menção acima, vamos para o exemplo.
Como alterar a cor da imagem em CSS?
No exemplo abaixo, primeiro, adicionaremos uma imagem usando a tag :
< imagem classe = 'imagem' src = 'imagem.jpg' tudo = '' >
< / corpo >
Antes de aplicar a propriedade de filtro, o resultado era assim:
Para alterar a cor de uma imagem, vamos passar para o CSS e aplicar a propriedade filter a ele. Vamos definir a opacidade para 0,5 para a transparência da imagem. Na função drop-shadow(), o valor de offset-x e offset-y é 0 porque queremos apenas alterar a cor de uma imagem.
.imagem {filtro : opacidade ( 0,5 ) sombra ( 0 0 Castanho ) ;
}
Aqui está o resultado final após a implementação:
A cor da imagem foi alterada com sucesso.
Conclusão
Para modificar a cor de uma imagem, duas funções CSS: opacity() e drop-shadow() são usadas com a propriedade filter. opacity() especifica a transparência da imagem e drop-shadow() atribui cor e sombra à imagem. Este artigo explicou o método de alterar a cor de uma imagem usando CSS.