Sobreposição de gradiente em CSS: dá tom e escurece imagens

A sobreposição de gradiente em CSS mais simples é um fundo em camadas: background-image: linear-gradient(rgb(2 6 23 / 0.6), rgb(2 6 23 / 0)), url(photo.jpg). As camadas listadas primeiro são desenhadas por cima, por isso o gradiente fica sobre a fotografia. Quando a imagem é um elemento <img>, põe antes o gradiente num pseudo-elemento, e quando queres que a cor dê tom à fotografia em vez de a cobrir, acrescenta um modo de mistura. Cada método serve uma tarefa diferente.

Método 1: um fundo em camadas

O background-image aceita uma lista separada por vírgulas. O primeiro valor é a camada de cima. Gradientes e imagens misturam-se livremente, e cada camada pode ter o seu tamanho e posição se listares essas propriedades pela mesma ordem. É a escolha certa para imagens decorativas, onde não é preciso texto alternativo.

.banner {
  background-color: #0f172a; /* shows until the photo loads */
  background-image:
    linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%),
    url("/images/workshop.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}

As barras superior e inferior servem para galerias onde um título fica no topo e um crédito na base. A vinheta leva o olhar para dentro sem transportar texto. O tom de marca é um aspeto forte para páginas de equipa e banners de eventos; as sobreposições de gradiente explicam quando cada uma resulta do ponto de vista do design.

Método 2: um pseudo-elemento sobre uma img

As imagens de conteúdo pertencem a elementos <img>: têm texto alternativo, srcset responsivo, carregamento preguiçoso e descoberta precoce pelo navegador. Um gradiente de fundo não pode ficar sobre uma <img>, por isso envolve-a e põe o gradiente no pseudo-elemento do invólucro.

<figure class="overlay">
  <img src="/images/harbour.jpg" alt="Fishing boats moored in a small harbour at dusk"
       width="1920" height="1080" fetchpriority="high">
  <figcaption>Harbour Days, 14 to 16 June</figcaption>
</figure>

.overlay {
  position: relative;
  margin: 0;
  isolation: isolate;
}

.overlay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(2 6 23 / 0.75), rgb(2 6 23 / 0) 60%);
  pointer-events: none;
  transition: opacity 250ms ease-out;
}

.overlay figcaption {
  position: absolute;
  inset: auto 1.5rem 1.5rem;
  z-index: 1;
  color: #f8fafc;
}

.overlay:hover::after { opacity: 0.6; }

Para uma imagem de herói que é a maior coisa no ecrã, o segundo método costuma ganhar em velocidade de carregamento. A otimização de imagens para a web explica porque o navegador encontra os elementos <img> mais cedo do que os fundos CSS.

Método 3: modos de mistura para lavados de cor

Uma sobreposição simples assenta na fotografia como vidro colorido. Um modo de mistura funde o gradiente com as próprias luzes e sombras da fotografia, o que parece mais que a fotografia foi tirada nessa cor. Usa background-blend-mode para fundos em camadas e mix-blend-mode num pseudo-elemento sobre uma <img>.

/* Duotone wash on a layered background */
.duotone {
  background-image:
    linear-gradient(135deg, #1e1b4b 0%, #f472b6 100%),
    url("/images/portrait.jpg");
  background-size: cover;
  background-blend-mode: color;
}

/* The same idea over an img element */
.overlay--wash::after {
  background: linear-gradient(135deg, #1e1b4b, #f472b6);
  mix-blend-mode: color;
}

A técnica completa, incluindo como escolher as duas cores, está no efeito duotone.

Sobreposições que mantêm o texto legível

O erro mais comum é uma película escura uniforme sobre toda a fotografia, digamos 50 por cento de preto. Embacia a imagem em todo o lado e pode não ser escura o bastante por trás das palavras. Dá antes forma à sobreposição: mais escura por baixo do texto, transparente onde a fotografia importa.

1. 1

   Decide onde ficam as palavras

   Em baixo à esquerda para legendas, no terço esquerdo para o texto do herói, ao centro para uma só linha.

2. 2

   Aponta o gradiente para elas

   Usa to top para texto em baixo, to right para texto à esquerda, ou um radial centrado nas palavras.

3. 3

   Pára cedo

   Desvanece até totalmente transparente aos 60 a 70 por cento para que a maior parte da fotografia fique intocada.

4. 4

   Verifica o pior caso

   Mede o contraste onde a fotografia é mais brilhante por trás de uma letra. O contraste de cor e a acessibilidade lista as razões.

Os véus suavizados com muitas paragens parecem mais lisos do que um desvanecimento de duas paragens; o método está nos gradientes transparentes em CSS.

Sobreposições sem adivinhação

Num site afinas cada sobreposição à mão. Para publicações sociais, banners e slides, o Gradiently dispensa o passo: um Mark sabe onde estão as tuas palavras e aprofunda ou levanta as suas próprias cores por trás delas, as fotografias podem receber tom nas cores do Mark em mono, duotone ou lavado e, com o Pro, o design redimensiona-se para todos os formatos num só passo, sem sobreposição para refazer.