Imagens hero de tela inteira de alta qualidade são fundamentais no design moderno da web. Alguns são mais artísticos, usando uma mistura de opacidade para dar às imagens mais pizzaz.
Mas e se você pudesse fazer uma imagem de fundo responsiva CSS impressionante usando transparência e sobreposição de cores sem afetar o texto ou outros elementos de sobreposição.
Tradicionalmente, isso exigia algumas habilidades no Photoshop.
Você só precisa de algumas habilidades em HTML e CSS para fazer uma tela inteira imagem principal de fundo com opacidade e uma sobreposição de cor que não afeta a sobreposição de texto.
Neste tutorial, você verá como criar a imagem em tela inteira com efeitos e uma sobreposição de texto. Você pode acessar o código-fonte no repositório GitHub de amostras do Love2Dev .
Criando uma imagem principal de fundo de tela inteira usando HTML e CSS
O exemplo é uma página de demonstração. Ele tem duas seções, a imagem do herói e uma segunda seção. A segunda seção não é vital para esta demonstração, mas fornece algum valor extra para dar ao resultado final uma sensação de’página real’.
Primeiro, o HTML principal:
Existem apenas 4 elementos para criar a imagem hero de exemplo e sobreposição de texto. O elemento’herói’envolve tudo. A’mensagem-herói’envolve o texto.
Para a demonstração, centralizarei o texto horizontal e verticalmente.
Antes de começarmos com o CSS do herói real, adicionei um CSS simples redefinir para os estilos. A regra do curinga (*) define a margem e o preenchimento como 0 por padrão.
Os elementos html e body têm altura e largura configuradas para 100%. Isso garante que a marcação cobrirá toda a janela de visualização.
* {margin: 0; preenchimento: 0; } html, corpo {largura: 100%; altura: 100%; }
Se você estiver usando uma biblioteca CSS como Bootstrap ou Materializar eles incluem redefinições de estilo mais robustas, então você não precisará repetir este código.
A imagem principal, em nosso exemplo, preenche toda a porta de visualização do navegador, que presumo também é a tela inteira. Claro que o usuário pode usar uma janela menor em desktops.
Para fazer isso, a altura, largura e min-largura e min-altura são todos configurados para 100%. Para garantir que o herói se alinhe com o elemento do corpo, a posição é definida como relativa.
.hero {width: 100%; altura: 100%; largura mínima: 100%; altura mínima: 100%; posição: relativa; }
Até agora, temos apenas um retângulo vazio que consome o espaço disponível.
Vamos adicionar a imagem de fundo.
Para fazer isso, irá alavancar um pseudo elemento .
Por vários anos os navegadores suportam o conceito de pseudo-elementos. Existem elementos’virtuais’adicionados aos elementos reais definidos no HTML.
Você pode estilizar esses elementos anexando a seguinte sintaxe do seletor,:: pseudoelemento.
A sintaxe original usa um único: e a maioria dos navegadores ainda oferece suporte para isso.
Estes são os pseudoelementos mais comuns:
- :: depois
- :: antes
- :: cue
- :: primeira letra
- :: primeira linha
A imagem principal de fundo usa os pseudo elementos:: before e:: after.
Primeiro, a imagem real.
O seletor.hero:: before cria uma regra CSS que adiciona a imagem ao plano de fundo do elemento. A propriedade background-image aponta para a imagem.
A propriedade background-size é definida para cobrir. Isso diz ao navegador para renderizar a imagem de forma que cubra todo o espaço disponível. Para a imagem do herói, este é o espaço do pseudo elemento, que por acaso é a porta de visualização disponível.
A propriedade de conteúdo é uma propriedade especial do pseudo elemento. Ele permite que você defina o texto e outro’conteúdo’a ser renderizado no contêiner do pseudoelemento.
Aqui, ele é definido como uma string vazia. Eu descobri que é uma prática recomendada definir pelo menos o conteúdo do pseudoelemento como uma string vazia para ajudar a dar-lhe uma definição. É como adicionar um caractere a elementos vazios.
As próximas cinco propriedades definem a posição e o tamanho da imagem do herói. O posicionamento absoluto nos permite combinar o elemento:: before com a posição do elemento real. Definindo top e left para 0, coloque o elemento:: before no mesmo ponto inicial do elemento hero real.
Definir a altura e largura para 100% faz com que ele corresponda às dimensões do elemento hero.
Em seguida, o z-index é definido como-2. Um número negativo foi selecionado para colocá-lo atrás do elemento real. Eu escolhi-2 para colocá-lo atrás da sobreposição de cor que definiremos mais tarde.
Finalmente, adicione alguma transparência à imagem de fundo definindo a opacidade para.4. Você pode ajustar o valor de opacidade para obter o resultado desejado.
.hero:: before {background-image: url (/img/background-1932466_1920-320x212. jpg); tamanho do fundo: capa; conteúdo:""; display: bloco; posição: absoluta; topo: 0; esquerda: 0; largura: 100%; altura: 100%; índice z:-2; opacidade: 0,4; }
Neste ponto, temos uma imagem de fundo semitransparente em tela cheia usando nada além de HTML e CSS.
O profissional blem é a solução que faz referência a uma única imagem, que pode não ter o tamanho ideal para o dispositivo e a porta de visualização.
Como podemos fazer uma imagem de fundo responsiva?
Fazendo uma imagem de fundo responsiva
Se você percebeu, a imagem de fundo referenciada na regra hero:: before padrão termina com 320×212,’background-1932466_1920-320×212.jpg’. Essa é uma convenção de nomenclatura que uso para me dizer as dimensões da imagem.
Tenho uma função lambda da AWS que pega uma imagem original e a executa por meio de uma rotina que produz um conjunto de imagens responsivas otimizadas.
A função também produz HTML, CSS e JSON padrão. Posso precisar integrar a imagem em diferentes casos de uso. O CSS que ele produz fornece uma regra padrão, usada no estilo.hero:: before, referenciando a menor imagem.
O design responsivo apropriado começa com a menor porta de visualização e progressivamente adiciona pontos de interrupção para ajustar o layout para telas maiores.
Após a definição da regra padrão, regras CSS adicionais são definidas, correlacionando-se a pontos de interrupção de consulta de mídia cada vez maiores.
Se você não está familiarizado com o uso de consultas de mídia em CSS, este é um breve tutorial .
A imagem de fundo do herói usada em este tutorial tem um conjunto de tamanhos de imagem diferentes. Cada um é configurado para ser renderizado em uma largura que corresponda à largura da imagem anterior.
Desta forma, a imagem é maior do que a porta de visualização disponível e não fica pixelada quando renderizada.
@media (min-width: 320px) {.hero:: before {background-image: url (/img/background-1932466_1920-460x305.jpg); }} @media (min-width: 460px) {.hero:: before {background-image: url (/img/background-1932466_1920-720x477.jpg); }} @media (min-width: 720px) {.hero:: before {background-image: url (/img/background-1932466_1920-980x649.jpg); }} @media (min-width: 980px) {.hero:: before {background-image: url (/img/background-1932466_1920-1240x821.jpg); }} @media (min-width: 1240px) {.hero:: before {background-image: url (/img/background-1932466_1920-1500x993.jpg); }} @media (min-width: 1500px) {.hero:: before {background-image: url (/img/background-1932466_1920-1760x1166.jpg); }} @media (min-width: 1760px) {.hero:: before {background-image: url (/img/background-1932466_1920-1920x1271.jpg); }}
Esta técnica garante que a imagem carregada pelo dispositivo seja o melhor ajuste, tanto para as dimensões da tela quanto para o uso potencial da largura de banda.
Este ponto não temos apenas uma imagem de fundo hero em tela cheia com alguma transparência, mas também usa técnicas de design responsivo para carregar a melhor imagem para o dispositivo.
Sobreposição de texto centralizado verticalmente e horizontalmente
Poderíamos ter apenas adicionou a imagem do herói ao fundo do DIV principal e encerrou o dia. Mas queremos torná-lo semitransparente e sobrepor o texto.
O problema de aplicar opacidade a um elemento para afetar a imagem de fundo é que não há como aplicar uma mudança de opacidade apenas ao fundo de um elemento. A mudança de opacidade se aplica a tudo no elemento, incluindo elementos filho.
Para fazer uma imagem de fundo semitransparente que não afeta uma sobreposição de texto, usamos o pseudo elemento:: before para exibir a imagem de fundo e aplique a opacidade.
Agora, vamos adicionar o texto.
O objetivo é sobrepor o texto que está centralizado horizontal e verticalmente. Também quero ter certeza de que é legível. Isso significa que quero um fundo entre o texto e a imagem de fundo. Também quero deixar a cor de fundo semitransparente.
Primeiro, centralizar o texto.
No passado, isso exigia alguns hacks de CSS. Hoje, você pode usar CSS Flexbox para alinhar elementos.
A regra CSS.flex-center altera a exibição do elemento pai para flex. A partir daí, o justify-content e o align-content podem ser definidos para o centro. Essas duas propriedades alinham os elementos filho ao longo dos eixos X e Y.
A configuração flex-direction: column é útil para a sobreposição de texto porque faz com que os elementos filhos sejam empilhados verticalmente. Caso contrário, eles seriam alinhados naturalmente da esquerda para a direita.
.flex-center {display: flex; direção flexível: coluna; justificar o conteúdo: centro; alinhar-conteúdo: centro; }
A seguir, defina as regras para o wrapper de mensagem.hero. Este elemento envolve o texto, renderizado usando elementos H1 e H2.
A regra.hero-message define a cor do texto, com uma leve sombra para garantir que ele se destaque. As dimensões dos elementos também são definidas para ter pelo menos 100% de largura e 12em de altura.
A altura de 12em é relativamente arbitrária para esta demonstração. Você pode ajustar essas dimensões conforme necessário para suas necessidades.
O tamanho inicial é 100% largo, projetado para preencher o espaço horizontal disponível em portas de visualização menores, como telefones.
.hero-message {color: #fff; sombra do texto: # 343a40 2px 2px; largura mínima: 100%; altura mínima: 12em; posição: relativa; }
Em seguida, adicione uma cor de fundo escuro semitransparente. Usaremos as mesmas técnicas que usamos para renderizar a imagem do herói de fundo. Em vez de uma imagem, defina a cor para algo escuro.
.hero-message:: before {content:""; display: bloco; posição: absoluta; margem esquerda: 0; largura mínima: 100%; altura mínima: 12em; índice z:-1; opacidade: 0,4; cor de fundo: # 343a40; }
Observe que as dimensões do pseudo elemento:: before correspondem ao elemento.hero-message. Você deseja que o plano de fundo corresponda ao tamanho do elemento real.
Como telas maiores não exigem uma largura de 100%, adicionei um ponto de interrupção de 1024 px para ajustar a largura para 50%. Observe que a margem esquerda do plano de fundo está definida como 25%. Isso empurra o elemento para a direita 25% para fazê-lo corresponder ao centro horizontal da tela.
Não consegui fazer com que o pseudo elemento sincronizasse sua posição sem o hack de margem. Se eu conseguir descobrir, atualizarei o código e esta postagem.
@media (min-width: 1024px) {.hero-mensagem {min-width: 50%; altura mínima: 12em; }.hero-mensagem:: antes de {margin-left: 25%; largura mínima: 50%; altura mínima: 12em; }}
O último conjunto de estilos centraliza o texto nos elementos do cabeçalho. Eu defini os elementos do cabeçalho para a largura total do espaço disponível, porque era simples. A partir daí, você pode usar text-align: center para centralizar o texto.
.hero-title,.hero-sub-title {width: 100% ; display: bloco; alinhamento de texto: centro; }.hero-title {margin: 3% 0; transformação de texto: maiúsculas; }
Se quiser posicionar o texto de forma diferente, você pode jogar com essas configurações. Talvez você queira alinhar o texto à direita ou à esquerda e posicioná-lo em locais diferentes na imagem de fundo. Depende de você.
Ainda não terminamos!
Vamos adicionar uma sobreposição de cores.
Adicionando uma sobreposição de cores
Outro efeito artístico comum que vejo usado em imagens de herói é aplicar um matiz de cor à imagem. Para esta demonstração, adicionarei uma cor roxa à imagem.
Desta vez, usaremos o pseudo elemento:: after.
As mesmas regras de posicionamento e tamanho se aplicam a este elemento que aplicamos à imagem de fundo e ao fundo do texto.
Para ter certeza de que a sobreposição de cores está na parte superior da imagem de fundo, defina o índice z para-1; Agora, ele deve ficar entre o elemento real e a imagem de fundo.
Você deve definir a opacidade para garantir que a imagem seja visível através da sobreposição de cor. Escolhi 0,4 novamente.
Você pode querer remover a configuração de opacidade na imagem de fundo para torná-la mais clara por meio da sobreposição de cores.
.hero:: after {background-color: # 563d7c; conteúdo:""; display: bloco; posição: absoluta; topo: 0px; esquerda: 0px; largura: 100%; altura: 100%; índice z:-1; opacidade: 0,4; }
Summary
Você ca Use este tutorial como referência para criar belas imagens de fundo de heróis em tela inteira. Os truques que usei podem ser aplicados para adicionar transparência e uma bela sobreposição de cores sem afetar a sobreposição de texto.
Sinta-se à vontade para usar este exemplo como modelo quando precisar criar imagens ricas em tela inteira com uma sobreposição de texto.
Isso é algo de que precisei em vários sites nos últimos anos e tive dificuldade em encontrar uma solução apenas para HTML e CSS. Agora que resolvi o problema, espero que isso ajude você também.
