Como exibir texto na imagem com o modo mix-blend CSS3

Fundos de imagem fique ótimo por trás de textos de exibição grandes. No entanto, sua implementação CSS não é tão simples. Nós podemos usar o clipe de fundo: texto; propriedade, no entanto, ainda é um recurso experimental sem suporte suficiente do navegador.

A alternativa CSS para mostrar um fundo de imagem por trás de um texto é usando o mix-blend-mode propriedade. Modos de mesclagem para elementos HTML são bastante suportados em todos os navegadores modernos para desktop e dispositivos móveis, com a exceção de alguns, como o Internet Explorer.

Neste post, vamos ver como mix-blend-mode (dois dos seus modos especificamente) funciona, e como você pode usá-lo para exibir um texto com fundo de imagem em dois casos de uso:

1. quando a imagem de fundo pode ser visto através do texto
2. quando a imagem de fundo corre ao redor o texto

Veja alguns exemplos na demonstração abaixo (as imagens são de unsplash.com).

o mix-blend-mode Propriedade CSS define como o conteúdo e a pano de fundo de um elemento HTML deve misturar junto colorwise.

Dê uma olhada na lista de modos de mesclagem, dos quais usaremos multiplicar e tela neste post.

Primeiro, vamos ver como funcionam esses dois modos específicos de mesclagem.

Como multiplicar E tela modos de mistura funcionam

Modos de mistura tecnicamente são funções que calcular um valor final de cor usando os componentes de cor de um elemento e seu pano de fundo.

o multiplicar modo de mistura

No multiplicar modo de mistura, as cores individuais dos elementos e seus cenários são multiplicado, e a cor resultante é aplicada à versão final misturada.

o multiplicar O modo de mistura é calculado de acordo com a seguinte fórmula:

B (Cb, Cs) = Cb × Cs

Onde:Cb - Componente de cor do cenárioCs - Componente de cor do elemento de origemB - Função de mistura

Quando Cb e Cs são multiplicados, a cor resultante é uma mistura desses dois componentes de cor e é tão escuro quanto o mais escuro das duas cores.

Para criar nosso fundo de imagem de texto, precisamos nos concentrar no caso quando Cs (o componente de cor do elemento de origem) é preto ou branco.

E se Cs é Preto seu valor é 0, a cor de saída também será preta, porque Cb × 0 = 0. Então, quando o elemento é colorido de preto, Não importa qual a cor do pano de fundo, tudo o que podemos ver depois de misturar é preto.

E se Cs é branco seu valor é 1, a cor de saída é o que Cb é porqueCb × 1 = Cb. Então, neste caso, vemos o pano de fundo diretamente como isso é.

o tela modo de mistura

o tela modo de mistura funciona de forma semelhante ao multiplicar modo de mistura, mas com o resultado oposto. Então, um primeiro plano preto mostra o pano de fundo como isso é, e um primeiro plano branco mostra branco com qualquer cenário.

Vamos ver rapidamente a sua fórmula:

B (Cb, Cs) = Cb + Cs - (Cb × Cs)

Quando Cs é Preto (0), a cor do cenário será mostrada após a mesclagem, como:

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

Quando Cs é branco (1) o resultado será branco com qualquer cenário, como:

Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1

1. Imagem mostrada através do texto

Para exibir o texto exibido por meio de sua imagem de fundo, usamos o tela modo de mistura com texto preto e espaço envolvente branco.

 
 
agua
 
 

 .pano de fundo largura: 600px; altura: 210 px; background-image: url (someimage.jpg); tamanho de fundo: 100%; margem: auto;  .text cor: preto; cor de fundo: branco; mix-blend-mode: tela; largura: 100%; altura: 100%; tamanho da fonte: 160pt; font-weight: mais ousado; texto-alinhar: centro; altura da linha: 210 px; margem: 0;  

Atualmente, nosso texto aparece abaixo, na próxima etapa adicionaremos cores personalizadas ao plano de fundo.

Adicionando cor

Como você já deve ter adivinhado, usar modos de mesclagem nos deixa apenas duas opções de cores para a área que circunda o texto - Preto ou branco. Contudo com branco, é possível adicionar alguma cor a ele usando uma sobreposição, se a cor de sobreposição combina bem com a imagem usada.

Para adicionar cor à área circundante, adicione um

para o HTML para uma sobreposição, e dar um cor de fundo com alta transparência. Use também o mix-blend-mode: multiplique propriedade da sobreposição, pois ajuda a cor de fundo da sobreposição a misture um pouco melhor com a imagem aparecendo dentro do texto.

 
 
agua
 
 
 

 .sobreposição background-color: rgba (0,255,255, 0,1); mix-blend-mode: multiplique; largura: 100%; altura: 100%; posição: absoluta; top: 0;  

Com essa técnica, poderíamos colorir a área ao redor do texto com o fundo da imagem:

Note que a técnica funciona bem apenas com cores transparentes sutis. Se você usar uma cor totalmente opaca ou uma cor que não corresponda à imagem, a imagem que aparece dentro do texto terá uma tonalidade muito visível da cor usada, portanto, a menos que seja uma aparência que você está procurando, evite cores opacas.

2. Texto rodeado por fundo de imagem

Mesmo que um posicionamento de texto normal sobre um fundo de imagem requer a mesma técnica, Vou mostrar-lhe um exemplo de como a demonstração acima se parece quando o efeito é revertido, ou seja, quando a cor do texto é branca e o fundo é preto.

 .texto cor: branco; cor de fundo: preto; mix-blend-mode: tela; largura: 100%; altura: 100%; tamanho da fonte: 160pt; font-weight: mais ousado; texto-alinhar: centro; altura da linha: 210 px; margem: 0;  

Você pode usar o mesma sobreposição para adicionar um pouco de cor ao texto, a menos que você queira mantê-lo branco.

 .sobreposição background-color: rgba (0,255,255, 0,1); mix-blend-mode: multiplique; largura: 100%; altura: 100%; posição: absoluta; top: 0;  

E abaixo você pode ver como o caso inverso se parece:

Observe que no Internet Explorer ou em qualquer outro navegador que não suporte a mix-blend-mode propriedade, o fundo da imagem não aparecerá, e o texto permanecerá preto (ou branco).