Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Duvida em opacidade no header

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Opacidade e sombra e atividade Opacidade nos elementos

por Adriano César Alves de Abreu
| 30.5k xp | 31 posts

Estou em um projeto pessoal, para praticar os conhecimentos adquiridos, mas apareceu uma dúvida sobre opacidade... Queria colocar opacidade na imagem, mas quando utilizo a propriedade opacity, ocorre o efeito até no titulo (charlie brown jr) e nos nav (home, shows...). Meu objetivo é colocar o efeito apenas na imagem de fundo. Gostaria de uma sugestão de como fazer...

código em html...

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Charlie Brown Jr</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="index.css">    
        <link href="https://fonts.googleapis.com/css2?family=Kirang+Haerang&display=swap" rel="stylesheet">        
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    </head>

    <body>
        <header>

            <div class="caixa">
                <h1>Charlie Brown Jr</h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="shows.html">Shows</a></li>
                        <li><a href="formulario.html">Pesquisa</a></li>
                    </ul>
                </nav>
            </div>
        </header>

    </body>



</html>

código css

header {
    background-image: url(choraoheard.jpg);
    height: 209px;
}


.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

h1 {
    font-weight: bold;
    font-family: 'Kirang Haerang', cursive;
    font-size: 69px;
    padding: 31px 0px 17px 0;
    color: #ffffff;
}

h1:hover {
    color: #ab0b15;
    transition: 1s;
}

nav {
    position: absolute;
    top: 130px;
    left: 38px;
}

nav li {
    display: inline;
    padding: 0 0 0 20px;

}

nav a {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {
    color: #ab0b15;
    text-decoration: underline;
    transition: 1s;
}
3 respostas
por Emanuel Gonçalves Santana de Souza
| 45.5k xp | 11 posts
Desenvolvedor Front End

Creio que aqui você terá que usar uma propriedade chamada background-filter, com a função opacity com o valor que você deseja, exemplo: background-filter: opacity(0.5), no seletor do header. Ficando o seletor header assim:

header {
    background-image: url(choraoheard.jpg);
    height: 209px;
    background-filter: opacity(0.5);
}

Pelo que entendi, a imagem que você quer que tenha a opacidade está definida como background (seletor header), correto? Se sim, apenas com background-filter.

Espero ter ajudado.

por Adriano César Alves de Abreu
| 30.5k xp | 31 posts

tentei aqui e infelizmente nao deu...

olha como que fica, a opacidade é aplicada ate no h1 e na nav

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!
por Tálison Miguel Amancio
| 122.1k xp | 90 posts

Fala Adriano tudo bom, existe algumas possíveis soluções para o seu caso, mas primeiramente é bom se atentar para o seguinte: Se o seu background for branco e o texto for branco, o resultado será o mesmo, pois a redução de opacidade de branco sobre um fundo branco... bem, não muda nada.

A solução que vou propor que é crossbrowser (funcionará até em algumas versões anteriores do IE - Internet Exploreer) é a seguinte:

header {
    position: relative;
    background-image: url(choraoheard.jpg);
    height: 209px;
}

header:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, .5);
}

O que estamos fazendo aqui é o seguinte: Criar um elemento sobre o header com a mesma cor do background. Isso te trará o mesmo efeito de redução de opacidade da imagem e poderá utilizar esta técnica quando estiver sobre um fundo de cor sólida. Esse elemento fica sobre a imagem, ocupando o tamanho dela todo e atrás do texto, como poderá ver ao mudar a cor do texto para preto ou outra. O relative no header é importante para que tenhamos uma referencia para posicionamento do position absolute.

Outra solução que também pode utilizar é adicionar o background com imagem neste elemento (removendo a do header) e utilizar opacidade.