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

Cor do background não funciona.

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Produzindo CSS no desktop e atividade Pseudo-classes e combinadores

por JardeL Victor Guimarães de Souza
| 38.4k xp | 25 posts

HTML

<input type="checkbox" id="menu" class="container__botao">
            <label for="menu" class="container__rotulo">
                <span class="cabecalho__menu-hamburguer container__imagem"></span> 
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Programação</a>
                </li>

CSS

.container__botao:checked~.container__rotulo> .container__imagem {
background-image: url(../img/Menu\Aberto.svg);
}

.container__botao:checked~.cabecalho__menu-hamburguer{
background: var(--azul-degrade);
}
5 respostas
por NATHALIA QUEIROZ
| 1981.6k xp | 4729 posts
Alura Scuba Team Suporte Educacional

Oii, Jardel! Tudo bem?

Poxa, o seu código aparentemente está certinho, não identifiquei nenhum erro que fosse um impedimento.

Sendo assim recomendo que envie o link do seu projeto no Github para que podermos olhar se o bug está ocorrendo em outra parte do código. Dessa forma, será melhor para procurarmos uma solução correta para o problema. E verifique se possui algum erro que o Vs Code está apontando, caso tenha coloque para gente também.

Deixo o link do repositório da instrutora para você realizar uma revisão no seu código, confira se está tudo certinho!

Link do repositório da aula

Qualquer dúvida, conte comigo.

Bons estudos, Jardel!

por Murillo Augusto Torres Vieira
| 10.2k xp | 8 posts
PHP Developer Pleno

Oi Jarde!

Você experimentou utilizar a tag background-color ao invés da background?

background-color: var(--azul-degrade);

Você também pode testar com uma cor aleatória ao invés da variável CSS background: #9C0

Se funcionar provavelmente o problema está na sua variável.

Até mais :)

solução!
por JardeL Victor Guimarães de Souza
| 38.4k xp | 25 posts

Véi, foram horas... mas consegui resolver reescrevendo o código, tinha hora que trocava a cor do background, mas a img SVG em branco não aparecia, ai refiz tudo certinho e consegui, obrigado pela atenção! até aqui vocês me ajudaram.

  • .container__botao:checked ~ .container__rotulo> .cabecalho__menu-hamburguer {
background-image: url(../img/Menu\ Aberto.svg);

    }

    .container__botao:checked ~ .container__rotulo{ background: var(--azul-degrade); }

por Murillo Augusto Torres Vieira
| 10.2k xp | 8 posts
PHP Developer Pleno

O parametro background pode reescrever outros parametros, pois com ele podemos passar todos os outros parametros do tipo background.

Por exemplo:

.classe { background: #000 url('imagem.png'); } Aqui vou estar passando background-color e background-image ao mesmo tempo.

.classe { background: #000 url('imagem.png'); background-position: 0% 0% } Aqui vou estar passando background-color e background-image ao mesmo tempo, e o background position vai sobrescrever a posição do background, mantendo o color e image do background.

.classe { background-position: 0% 0%; background: #000 url('imagem.png');} Já o ao contrário não acontece, quando passamos o background-position e logo em seguida passamos o background, o parametro background sobrescreve ele, porque teoricamente ele já tem uma posição definida (mesmo se voce nao definir, ele vai na posição default);

O mesmo acontece com estes paramatros: background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, e background-color.

Então por exemplo, se você passou background-image: url(../img/Menu\ Aberto.svg); e depois passou background: var(--azul-degrade); o parametro background-image será sobrescrito.

Para manter os dois, você pode passar o color separado com o background-color: var(--azul-degrade); ou os dois parâmetros juntos: background: var(--azul-degrade) url(../img/Menu\ Aberto.svg);

Espero ter ajudado!!

por JardeL Victor Guimarães de Souza
| 38.4k xp | 25 posts

Obrigado, Murilo de verdade! me ajudou bastante e ainda me deu outra visão sobre este erro que cometi. com bastante esforço consegue meu certificado e finalizar o projeto xD, consegue me enviar uma trilha sobre lógica de programação? quero está 100% antes de ir pra JS.