# Sobreposição de gradiente em CSS: dá tom e escurece imagens [Canonical HTML page](https://gradiently.design/pt-pt/guide/css-gradient-overlay) Pôr um gradiente sobre uma fotografia leva uma linha extra de CSS. Escolher o método certo entre três decide se a imagem carrega depressa, se a sobreposição pode animar e se as palavras por cima continuam legíveis. ## The short version - A sobreposição de gradiente mais rápida em CSS é uma segunda camada de fundo: lista o gradiente antes de url() em background-image para ficar por cima. - Para um elemento img, põe o gradiente num pseudo-elemento ::before ou ::after de um invólucro posicionado. - O background-blend-mode e o mix-blend-mode transformam uma sobreposição de gradiente num lavado de cor que dá tom à imagem em vez de a cobrir. - As imagens de herói definidas como fundos CSS são descobertas mais tarde do que os elementos img, por isso uma img com sobreposição costuma carregar mais depressa acima da dobra. - As sobreposições que levam texto devem ser mais escuras por trás das palavras e transparentes no resto, não uma película escura uniforme sobre toda a fotografia. 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 ``, 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. ```css .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; } ``` Um painel escuro à esquerda para o texto, a clarear aos 70 por cento para a direita da fotografia ficar luminosa. A cor de reserva condiz com a sobreposição, por isso o texto lê-se mesmo antes de a imagem chegar. - Painel lateral para texto: `linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%)` - Barras superior e inferior: `linear-gradient(to bottom, rgb(2 6 23 / 0.6) 0%, rgb(2 6 23 / 0) 25%, rgb(2 6 23 / 0) 65%, rgb(2 6 23 / 0.75) 100%)` - Vinheta suave: `radial-gradient(ellipse at center, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.55) 100%)` - Tom diagonal de marca: `linear-gradient(135deg, rgb(109 40 217 / 0.85) 0%, rgb(236 72 153 / 0.55) 100%)` Quatro predefinições de sobreposição, mostradas aqui sobre a página. Põe qualquer uma à frente de `url()` no teu próprio `background-image`. 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](https://gradiently.design/pt-pt/guide/gradient-overlay) 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 ``: têm texto alternativo, `srcset` responsivo, carregamento preguiçoso e descoberta precoce pelo navegador. Um gradiente de fundo não pode ficar sobre uma ``, por isso envolve-a e põe o gradiente no pseudo-elemento do invólucro. ```html
Fishing boats moored in a small harbour at dusk
Harbour Days, 14 to 16 June
``` Um elemento de imagem real com texto alternativo real. A legenda ficará sobre a sobreposição. ```css .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; } ``` `isolation: isolate` mantém o empilhamento da sobreposição dentro da figura. A sobreposição pode desvanecer ao passar o rato porque é uma camada própria. ### Camada de fundo - Um elemento, uma declaração - Sem texto alternativo, por isso só imagens decorativas - Descoberta tarde pelo navegador, o que pode atrasar um herói - A sobreposição não desvanece sem animar o fundo inteiro ### img mais pseudo-elemento - Um invólucro e mais algumas linhas - Texto alternativo correto e `srcset` responsivo - Descoberta cedo; o `fetchpriority="high"` ajuda a imagem principal - A opacidade da sobreposição faz transição com pouco custo 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](https://gradiently.design/pt-pt/guide/lighthouse-image-performance) explica porque o navegador encontra os elementos `` 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 ``. | Modo de mistura | O que faz | Boa sobreposição para | | --- | --- | --- | | `multiply` | Escurece; as zonas brancas assumem a cor do gradiente | Tons ricos e sombrios em fotografias claras | | `screen` | Aclara; as zonas pretas assumem a cor | Aspetos arejados e desbotados em fotografias escuras | | `overlay` | Reforça o contraste e empurra a cor para os meios-tons | Cor de marca com impacto em retratos | | `color` | Mantém a luz da fotografia, substitui a cor | Lavados em estilo duotone a partir de um gradiente de duas cores | | `soft-light` | Uma versão suave do overlay | Calor ou frieza subtis | Os cinco modos que vale a pena conhecer. `color` com um gradiente de duas cores é o duotone mais rápido na web. ```css /* 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; } ``` O `background-blend-mode` mistura camadas de um elemento. O `mix-blend-mode` mistura um elemento com o que está por trás, aqui a fotografia. A técnica completa, incluindo como escolher as duas cores, está no [efeito duotone](https://gradiently.design/pt-pt/guide/duotone-effect). ## 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. **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. **Aponta o gradiente para elas** Usa `to top` para texto em baixo, `to right` para texto à esquerda, ou um radial centrado nas palavras. 3. **Pára cedo** Desvanece até totalmente transparente aos 60 a 70 por cento para que a maior parte da fotografia fique intocada. 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](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) 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](https://gradiently.design/pt-pt/guide/css-gradient-transparent). ## 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. Um banner largo de evento para Harbour Days com um fundo em gradiente que se aprofunda por trás do título Um banner de evento ao tamanho de herói de site, com o fundo a acalmar-se por trás das palavras em vez de uma sobreposição afinada à mão. ## FAQ ### Como ponho um gradiente sobre uma imagem de fundo em CSS? Lista o gradiente antes da imagem em `background-image`: `linear-gradient(`rgb(0 0 0 / 0,5)`, transparent), url(photo.jpg)`. A primeira camada é desenhada por cima. ### Como acrescento uma sobreposição de gradiente a um elemento img? Envolve a imagem num elemento posicionado e põe o gradiente no seu pseudo-elemento `::after` com `position: absolute` e `inset: 0`. ### Qual é a diferença entre background-blend-mode e mix-blend-mode? O `background-blend-mode` mistura as camadas de fundo de um elemento. O `mix-blend-mode` mistura um elemento inteiro com o que está por trás. ### Quão escura deve ser uma sobreposição de imagem para texto? Escura o bastante para o texto passar as verificações de contraste no ponto mais brilhante por trás dele. Dá forma ao gradiente para ser mais escuro aí e transparente no resto. ### Posso animar uma sobreposição de gradiente ao passar o rato? Sim. Põe a sobreposição num pseudo-elemento e faz a transição da sua `opacity`, o que é mais barato do que animar o próprio fundo.