CSS HTML

HTML: Aplicar opacity apenas em background

6 de maio de 2020

HTML: Aplicar opacity apenas em background

Neste artigo vamos aprender a aplicar opacity apenas em background, ou seja, apenas div do fundo e não o conteúdo ganhará opacidade.

opacidade apenas no background capa

Fala programador(a), beleza? Bora aprender a deixar apenas o background transparente! 😀

A ideia aqui é utilizar um background-color de RGBA e adicionar a opacity

Pode ser um problema não utilizar hexadecimal como estamos acostumados, mas é a forma mais fácil de resolver o problema

E temos vários conversores de hexa para RGBA na internet

Então observe o seguinte exemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Aplicar opacidade apenas no background</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="container">
        <h1>O conteúdo</h1>
        <p>Não tem opacidade</p>
    </div>
</body>
</html>

Criamos o #container que vai ter um background transparente, e os elementos h1 e p, não podem ter opacidade pois é nosso objetivo

Veja o CSS para atingir o resultado ideal:

body {
    margin: 50px;
    font-family: Helvetica;
}

#container {
    width: 500px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.1);		
    padding-top: 100px;
    padding-bottom: 100px;
}

#container h1, #container p {
    color: darkblue;
}

Vamos ao resultado no navegador, para depois explicar o código:

Primeiramente no body adicionamos uns estilos gerais para mudar a fonte e dar uma margin

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Já no container delimitamos uma largura com width e centralizamos o conteúdo com o text-align

Além disso inserimos uma background-color de 0,0,0 que significa #000000 no hexa, ou seja, cor preta

E o último parâmetro controle a opacidade, transparência, e 0.1 significa 10%

Então veja que o fundo branco aparece plenamente, dando um aspecto esbranquiçado a div #container que deveria ter a cor preta

E os conteúdos (h1 e p) que estão na cor darkblue, não sofrem impacto nenhum com isso

Então conseguimos aplicar transparência apenas na div do fundo, deixando os elementos do container intactos

Conclusão

Neste artigo vimos aplicar opacity apenas em background, deixando o conteúdo da div sem opacidade

O que é muito utilizado quando você precisa mostrar uma imagem no fundo, mas quer inserir texto na frente

Principalmente quando a imagem é muito claro

Mas isso depende do layout e o importante é que resolvemos o problema, agora você está apto a criar divs com opacity 🙂

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Subscribe
Notify of
guest
2 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Guilherme Genuino Pereira dos Santos

Muito obrigado, eu procurei em vários Sites, porém só aqui consegui resolver meu problema.

Battisti

de nada Guilherme!

2
0
Would love your thoughts, please comment.x