Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Imagens repetidas (Não Resolvidas)

olá pessoal! boa tarde.

segue meu código:

HTML

<section class="diferenciais container">
            <ul class="diferenciais__lista">
                <li class="diferenciais diferenciais__item--tempo">
                    <h2 class="item__titulo">Tempo</h2>
                    <p class="item__texto">Tempo é importante! Trabalhamos em ritmo acelerado, atendendo rigorosamente aos prazos.</p>
                </li>
                <li class="diferenciais diferenciais__item--foco">
                    <h2 class="item__titulo">Foco</h2>
                    <p class="item__texto">Focamos no empreendimento! Oferecemos serviços de qualidade com preços acessíveis.</p>
                </li>
                <li class="diferenciais diferenciais__item--especialistas">
                    <h2 class="item__titulo">Especialistas</h2>
                    <p class="item__texto">Equipe experiente e especializada! Testamos todos os produtos antes do lançamento.</p>
                </li>
            </ul>
        </section>
.diferenciais {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.diferenciais__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.diferenciais__item {
    max-width: 350px;

    box-sizing: border-box;

    background-repeat: no-repeat;
    background-position: top 1.25rem left 2.5rem;

    padding: 2rem 0 2rem 5rem;
}

.diferenciais__item--tempo {
    background-image: url(../img/icone-relogio.png);   
}

.diferenciais__item--foco {
    background-image: url(../img/icone-dinheiro.png); 
}

.diferenciais__item--especialistas {
    background-image: url(../img/icone-quimica.png);  
}

.item__titulo {
    color: var(--cinza-escuro);
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.item__texto {
    line-height: normal;
}

se alguem encontrar o erro por favor me ajudem!!!!

2 respostas
solução!

Olá Adriano, boa noite.

Resolução do Problema:

As imagens definidas no 'background-imagem' estão realmente se repetindo, mesmo com o valor da propriedade 'background-repeat' sendo no-repeat. Não há nada de errado com as propriedades e seus valores no Css, elas estão corretas. O problema esta na declaração da classe no elemento li lá no Html. Vejamos:

  • Você declarou a classe na li abaixo como: "diferenciais__item--tempo"
      <li class="diferenciais diferenciais__item--tempo">
          <h2 class="item__titulo">Tempo</h2>
          <p class="item__texto">Tempo é importante! Trabalhamos em ritmo acelerado, atendendo rigorosamente aos prazos.</p>
      </li>
  • E no Css onde você declarou o 'background-repeat' foi na seguinte seleção de classe: ".diferenciais__item".

          .diferenciais__item {
              max-width: 350px;
    
              box-sizing: border-box;
    
              background-repeat: no-repeat;
              background-position: top 1.25rem left 2.5rem;
    
              padding: 2rem 0 2rem 5rem;
          }

Percebeu? você não tem uma classe chamada ".diferenciais__item" nas li, mas sim as classes chamadas "diferenciais", ".diferenciais__item--tempo", ".diferenciais__item--foco", ".diferenciais__item--especialistas". Por isso ele não aplica a propriedade.

Solução do Problema:

Há duas formas de resolver isso:

  1. Colocar o estilo definido na seleção ".diferenciais__item" na seleção ".diferenciais":

    .diferenciais {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    
        max-width: 350px;
    
        box-sizing: border-box;
    
        background-repeat: no-repeat;
    
        background-position: top 1.25rem left 2.5rem;
    
        padding: 2rem 0 2rem 5rem;
    }
    
    .diferenciais__lista {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    
    .diferenciais__item {
    
    }
    
    .diferenciais__item--tempo {
        background-image: url(../img/icone-relogio.png);   
    }
    
    .diferenciais__item--foco {
        background-image: url(../img/icone-dinheiro.png); 
    }
    
    .diferenciais__item--especialistas {
        background-image: url(../img/icone-quimica.png);  
    }
    
    .item__titulo {
        color: var(--cinza-escuro);
        font-weight: 700;
        font-size: 1.2rem;
        text-transform: uppercase;
        margin-bottom: 1.5rem;
    }
    
    .item__texto {
        line-height: normal;
    }
  1. Ou declarar a classe ".diferenciais__item" na li separado do "--tempo":
    <li class="diferenciais diferenciais__item tempo">
        <h2 class="item__titulo">Tempo</h2>
        <p class="item__texto">Tempo é importante! Trabalhamos em ritmo acelerado, atendendo rigorosamente aos prazos.</p>
    </li>

Conclusão:

Você errou na hora de declarar uma class no elemento li. Para declarar uma classe em um elemento Html é desse jeito:

    <ul class="lista-compras">
        <li class="item">Café</li>
        <li class="item">Pão</li>
    </ul>

Para Adicionar múltiplas classes a um único elemento Html, você adiciona um espaço e logo em seguida o nome da** nova classe**, desse jeito: assim é uma (class="item"), agora e 2 classes (class="item prioridade-basica")

    <ul class="lista-compras">
        <li class="item">Café</li>
        <li class="item prioridade-basica">Pão</li>
    </ul>

Despedida:

Tenha uma boa noite. Se tiver dúvida ainda, farei o possível para responder novamente.

olá Carlos bom dia! Muito obrigado pela sua dica, arrumei minha classe e agora deu certo.