2

Tenho um background de cor vermelha, que formatei ele no body, e tenho um background de cor branca de conteúdos. Na tag <h2> com o seguinte texto whats language do you want está lá dentro, e não é formatado pelo o white, por quê?

HTML

<body>
    <main role="main" class="bgfo">
        <div class="intro-lang">
            <header class="lang-header">
                <div class="logo">
                <!--
                    <h1>Free time</h1>
                    <span>o portal da descriçao</span>
                -->
                </div>
            </header>

            <!-- BEGINNING QUESTION LANGS -->
            <h2 class="question-title">What language do you want ?</h2>
            <nav class="lang-nav">
                <ul>
                    <li><a href="#">Portuguese</a></li>
                    <li><a href="#">English</a></li>
                    <li><a href="#">Spanish</a></li>
                </ul>
            </nav>
            <!-- END QUESTION LANGS -->

                <footer class="lang-footer clear">
                    <small>Like faceboook / Twitter / G+</small>
                </footer>
        </div>
    </main> 
</body>

CSS

*{margin:0; padding:0;  font-family: 'arial'; background: red;}
a{text-decoration: none;}
/* Fonts*/
.clear{clear: both;}
.intro-lang{
    width: 800px;
    margin: 150px auto;
    position: relative;
    background: white;
}
.lang-header{
    margin-bottom: 80px;
}
.question-title{
    font-family:'arial';
    font-size: 40px;
    letter-spacing: 4px;
    text-align: center;
    color: #402E15;
}
.lang-nav {
    width: 500px;
    margin: 30px auto;
}
.lang-nav li{
    float: left;
    margin:  20px;
}
.lang-nav a{
    background: #402E15;
    padding: 10px;
    color: #FFB853;
    font-size: 20px;
}
.lang-nav a:hover{
    background: brown;
    color: white;
}
.lang-footer{
    text-align: center;
    margin-top: 200px;
}

Exemplo no codepen.

0

4 Respostas 4

2

Background não é uma propriedade que o filho herda do pai. É especifica.

Você gostaria que a classe .question-title ficasse com o fundo branco, correto?

Então...

.question-title{
  background: #fff; 
}
1
  • Hum, legal! pensava que herdava. Valeu felipe =) 13/08/2014 às 14:19
1

O elemento <h2> está com o background vermelho por conta da regra *{margin:0; padding:0; font-family: 'arial'; background: red;} que é aplicada a todos os elementos por conta do seletor *, para mudar isso você deve atribuir uma regra ao <h2>. Exemplo:

.intro-lang h2 {
    background-color:white;
}
0
1

Se não precisar de suporte aos browsers IE8 ou anterior, basta utilizar background: transparent; no elemento que deve "herdar" a cor.

Por exemplo:

.question-title{
    font-family:'arial';
    font-size: 40px;
    letter-spacing: 4px;
    text-align: center;
    color: #402E15;
    background: transparent;
}
4
  • background:transparent funciona no IE8? 13/08/2014 às 14:25
  • Boa Felipe. Não sabia disso... Obrigado! 13/08/2014 às 14:29
  • O ideal no IE8 é pegar um png de 1px e dar background-repeat:repeat 13/08/2014 às 14:45
  • Boa Felipe, não sabia disto 14/08/2014 às 14:45
1

Para replicar o background branco para todos os filhos do elemento, você pode fazer assim:

.intro-lang *{
    background:white;
}

Para replicar apenas para títulos h1:

.intro-lang h1{
    background:white;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .