Escurecer a imagem de fundo CSS
Propriedades para escurecer a imagem de fundo no CSS:
Usaremos as três propriedades a seguir que o CSS fornece para escurecer a imagem de fundo. Essas propriedades são:
- Usando a propriedade do filtro.
- Usando a propriedade de imagem de fundo e defina seu valor em gradiente linear.
- Usando a propriedade Backment-Blend Mode.
Agora, vamos utilizar todas essas propriedades em nossos códigos abaixo e você aprenderá com esses exemplos como usar essas propriedades e como definir o valor dessas propriedades, porque também explicaremos todos os códigos.
Exemplo 1:
Estamos utilizando o código do Visual Studio para mostrar os exemplos fornecidos. Então, abriremos o novo arquivo e selecionaremos a linguagem "HTML", que resultará na produção de um arquivo HTML. Então, no arquivo recém -gerado, começamos a escrever o código. O ".A extensão do arquivo html ”é automaticamente anexada ao nome do arquivo quando salvarmos o código preenchido. Agora, temos tags básicas colocando “!”Marca e pressionando“ Enter ”. Quando as tags HTML básicas aparecem neste arquivo criado, começaremos adicionando um título.
Então, também colocamos um parágrafo abaixo deste título e inserimos a imagem após este parágrafo. Se a imagem for inserida, temos outro parágrafo e também uma classe div com o nome "imagem escurecida". Aqui, o código HTML é concluído. Agora, salve -o e vamos para o arquivo CSS, onde adicionaremos a propriedade "Filtro" para escurecer a imagem de fundo.
Para "H1", definimos o valor "font-família" para "argelino" e também aplicamos "cor" a esse cabeçalho como "verde". O "tamanho da fonte" do texto do parágrafo é "20px" e sua "cor" é "vermelha", "ousada" em seu "peso da fonte". Em seguida, vamos utilizar a propriedade "filtro" para a classe DIV "escurecia a imagem". Esta propriedade ajuda a tornar a imagem mais escura. Usamos esta propriedade aqui para que a imagem pareça mais escura na saída. Definimos seu valor usando o valor "brilho" e selecionamos o brilho "60%" para esta imagem.
Na “imagem de fundo”, colocamos o mesmo caminho da imagem que demos no arquivo html. Então, aplicamos essa propriedade escurecida à imagem que inserimos acima e veremos a imagem original e a imagem escura na tela de saída. Também definimos a "largura" e "altura" da div como "200px" e "620px", respectivamente. Esta propriedade de "altura" definirá a altura da divisão e a propriedade "largura" definirá a largura do div.
Tornamos esta imagem uma imagem mais escura com a ajuda da propriedade "filtro" CSS e definindo o "brilho" como o valor desta propriedade. Aplicamos o brilho “60%” a esta imagem para torná -la mais escura que a imagem original.
Exemplo # 2:
Temos um título aqui e depois adicione a imagem. Após esta imagem, colocamos novamente um título e depois temos um contêiner div. Utilizaremos a segunda propriedade para tornar esta imagem um mais escuro.
Aplicamos "cor" a esse cabeçalho como "marrom" e definimos o valor "font-família" para "H1" para "argelino". A "altura" da imagem é definida como "240px" e sua "largura" é "630px". Em seguida, mencionamos o contêiner da div "escurecida" e colocamos a propriedade "Imagem de fundo" na qual utilizamos o "gradiente linear" e estabelecemos seu valor em forma "rgBA". Aqui, usamos dois valores “rgba” e os definimos como “rgba (0, 0, 0, 0.5) ”onde“ 0.5 ”é o valor alfa. Também inserimos a imagem no “url ()”. Inserimos o caminho da imagem neste "url ()". A "altura" desta div é "240px" e também definimos sua "largura" para "630px".
Na saída, tanto as versões originais quanto as escuras da imagem podem ser vistas. A imagem original e a imagem escura podem ser claramente distinguidas uma da outra na captura de tela abaixo. A imagem escurecida é renderizada porque utilizamos a propriedade "Imagem de fundo" e definimos seu valor no tipo "gradiente linear".
Exemplo # 3:
Usamos o código HTML acima e inserimos outra imagem neste código. Usaremos o "modo de mistura de fundo" para criar o efeito de imagem escurecido na imagem.
Definimos o valor "font-família" para "H1" para "argelino" e aplicar "cor" a esse cabeçalho para "Maroon". A "largura" da imagem é "630px" e sua "altura" é "250px". Utilizamos o nome da classe Div como "imagem escurecida" e aplicaremos algumas propriedades. Utilizamos a propriedade "plano de fundo" e colocamos o valor "RGBA" aqui. O valor "rGBA" que estamos utilizando é "(0, 0, 0, 0.7) ”e então temos a propriedade“ URL ”que utilizamos para dar o caminho da imagem. Damos o caminho da imagem como “MyNewimage.Png ”.
Depois disso, temos a propriedade "Repetir-Seat" e utilizamos a palavra-chave "sem repetição" como o valor desta propriedade. Agora, também definimos o “tamanho de fundo” e colocamos “capa” para que a imagem cubra todo o fundo. A propriedade "Background Blend-Mode" é para aplicar o efeito de escurecimento à imagem. Nós o definimos como a palavra -chave "escurecida". Portanto, quando esta imagem renderiza na tela de saída, ela aparecerá como uma imagem escura por causa dessa propriedade. A "altura" da div chamada "escurecida" é ajustada para "330px" e também definimos sua "largura", que é "650px". Agora, veja a saída de como essas imagens aparecerão.
As formas originais e mais sombrias da imagem são visíveis no resultado. Aqui no instantâneo abaixo, é possível dizer facilmente a diferença entre a imagem original e a imagem escurecida. Usamos o atributo "Backment Blend Mode" e colocamos a palavra-chave "mais escura" como o valor desse atributo para renderizar a imagem escura.
Conclusão
Cobrimos completamente esse conceito e vimos inúmeros casos de como escurecer a imagem de fundo no CSS. Como foi mencionado anteriormente, usamos três propriedades diferentes para escurecer a imagem de fundo. Utilizamos todas as três propriedades em nossos códigos. Também abordamos como usar essas propriedades e como definir seu valor. Discutimos que temos a propriedade "filtro", a propriedade "Imagem de fundo" e também a propriedade "Background Blend Mode" para tornar a imagem de fundo mais escura. Também fornecemos os resultados de todos esses códigos em que renderizamos a imagem escurecida e original na tela de saída. Para seu benefício, criamos um tutorial abrangente no qual o código é fornecido e explicado minuciosamente, juntamente com os resultados.