[Sugestão] escurecimento do background

2
respostas

por Luis Carlos Jr

| 39.9k xp | 69 posts

no exemplo da instrutora as imagens ficaram muito claras e quase não da para ver o texto em cima.

olhando as propriedades da imagem no figma eu achei esses valores:
Insira aqui a descrição dessa imagem para ajudar na acessibilidade
Acredito que a instrutora deixou passar essa informação. Pesquisando, esse foi o código mais próximo que conseguir executar do ideal.

/* card 1 */
.card-offer.japao {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-card-japao.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* card 2 */
.card-offer.sanandreas {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-card-san-andreas.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* card 3 */
.card-offer.paraiba {

  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-card-paraiba.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* card 4 */
.card-offer.manaus {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-card-manaus.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Achei o resultado bem satisfatório. Porém não sei se segui as boas práticas:
Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Explicação do código acima. O comando:

linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

Cria uma camada acima da imagem de fundo de transição entre duas cores, a que é passada no primeiro parâmetro para a que é informada no segundo parâmetro. Porém ao informar a mesma cor você cria uma camada sólida.

Os 0,0,0 refere a cor preta e o 0,5, refere-se a percentagem de transparência aplicada.

Acho que é isso.... me corrijam se entendi errado

2 respostas

por Rafaela Petelin Silvério

| 1736.2k xp | 3972 posts

Alura Scuba Team

17 horas atrás

Oi, Luis! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Parabéns pela sua preocupação com a legibilidade do texto e a forma como você usou o linear-gradient com rgba para criar uma camada escura sobre a imagem, o que melhora bastante a leitura e está alinhado com boas práticas de CSS.

Uma dica interessante para o futuro é centralizar esse efeito em uma classe reutilizável, evitando repetição de código. Veja este exemplo:


.card-offer {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card-offer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 16px;
}

Esse código cria uma camada semitransparente usando pseudo-elemento, permitindo reutilizar o efeito em vários cards sem repetir o linear-gradient.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

por Luis Carlos Jr

| 39.9k xp | 69 posts

6 horas atrás

Agradeço pela dica. Código melhorado

/* overlay que ficará acima do card*/
.card-offer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 16px;
}

/* padrão dos cards de ofertas */
.card-offer {
  padding: 24px 16px;
  width: 312px;
  height: 288px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: var(--text-menu-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.card-offer > * {
  z-index: 1;
}

/* card 1 */
.card-offer.japao {
  background-image: url(../img/bg-card-japao.jpg);
}

/* card 2 */
.card-offer.sanandreas {
  background-image: url(../img/bg-card-san-andreas.jpg);
}

/* card 3 */
.card-offer.paraiba {
  background-image: url(../img/bg-card-paraiba.jpg);
}

/* card 4 */
.card-offer.manaus {
  background-image: url(../img/bg-card-manaus.jpg);
}

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema