Estilos de fundo - Ajuda do Webflow
Uma visão geral dos estilos de fundo que você pode definir em um elemento: cor, imagens, gradientes, sobreposições de cor e vídeos.
Cor de fundo
Você pode definir uma cor de fundo em qualquer elemento, exceto imagens e vídeos (embora você possa usar imagens e vídeos como fundos). Adicione uma cor de fundo inserindo um valor de cor (por exemplo, hex, rgba ou nome da cor) ou usando o seletor de cores. Você também pode adicionar cor de fundo a elementos de texto ou a conteúdo de texto específico dentro de um elemento de texto.
Se você deseja que as cores de fundo sejam consistentes em todo o seu site, use a tag Body (Todas as páginas) para herança. Estilize-a selecionando o elemento Body e escolhendo a tag no painel de Estilo ou usando o menu de herança. Quaisquer alterações no Body (Todas as páginas) serão padrão para novos elementos.
A maioria dos elementos tem um fundo transparente por padrão. Alguns elementos, como o componente Slider, têm uma cor padrão que você pode substituir.
Imagem de fundo
O Webflow oferece muitas opções para personalizar sua imagem de fundo.
Para adicionar ou alterar a imagem de fundo:
- Role até Fundos no Painel de Estilo
- Clique em Escolher imagem no painel de Ativos
- Marque a caixa para @2x para imagens mais nítidas em dispositivos HiDPI
Para definir um vídeo de fundo, use o componente de vídeo de fundo no painel Adicionar.
Tamanho da imagem de fundo
- Personalizado: Defina valores de largura/altura ou porcentagem. Escale maior com valores acima de 100%.
- Cobrir: Preenche e cobre o fundo, possivelmente cortando a imagem.
- Conter: Mantém a imagem contida dentro do elemento.
Posição da imagem de fundo
O padrão é no canto superior esquerdo. Você pode ajustar manualmente as posições (px, %, VW, VH).
Ladrilho
Imagens de fundo se repetem vertical e horizontalmente por padrão. Controle para repetir horizontalmente, verticalmente ou não repetir.
Fixo ou rolável
Escolha Não fixo (imagem rola) ou Fixo (imagem permanece no lugar). Imagens Fixas são contidas pela janela de visualização.
Gradientes
Gradientes podem ser usados sozinhos ou em camadas sobre cor/imagem de fundo. Dois tipos:
- Gradientes lineares
- Gradientes radiais
Ambos têm pontos de parada onde as cores desvanecem.
Gradiente linear
Defina a direção pelo ângulo via dial, setas (incrementos de 45 graus) ou entrada de campo.
Paradas de gradiente
Edite cor/opacidade nas paradas. Camadas sobre imagem tornam a imagem visível em opacidade mais baixa. Adicione paradas clicando. Remova arrastando para fora.
Repetir
Alterna para repetir o gradiente.
Reverter
Ícone para reverter posições de parada.
Gradiente radial
Cria gradiente circular. A parada à esquerda é a cor no centro.
Posição
Escolha o ponto focal via pontos ou manualmente com valores/unidades.
Tamanho
Controles predefinidos:
- Lado mais próximo: centro ao lado mais próximo
- Canto mais próximo: centro ao canto mais próximo
- Lado mais distante: centro ao lado mais distante
- Canto mais distante: (padrão)
Sobreposição de cor
Adicione sobreposição de cor aos fundos com seletor de cor e opacidade.
Camadas de imagens e gradientes
Empilhe várias imagens de fundo, gradientes e sobreposições para efeito. Reorganize arrastando, alterne visibilidade com ícone de olho, exclua com lixeira.
Vídeo de fundo
Vídeos de fundo são vídeos silenciosos e em loop para fundos, adicionando um toque cinematográfico. Esteja ciente:
Adicione com Busca rápida (CMD/CTRL+E) ou Painel de Adição > Componentes. Faça upload do seu vídeo (<30MB; webm, mp4, mov, ogg). Os nomes dos arquivos devem evitar espaços/caracteres especiais.
A transcodificação ocorre após o upload (mp4 & webm para suporte do navegador).
Configurações de vídeo
- Repetir vídeo: repete continuamente.
- Reprodução automática do vídeo: inicia ao carregar a página.
- Incluir botão de play/pausa: o visitante pode controlar a reprodução.
Visualizando o vídeo de fundo
- Passe o mouse sobre a miniatura
- Abra em nova aba
- Ícone de visualização na barra
Substituindo o vídeo de fundo
Abra as configurações para substituir o vídeo, transcodificar, visualizar, etc.
Usando o vídeo de fundo como uma seção
Coloque conteúdo dentro do elemento de vídeo de fundo. Estilize como de costume no painel de estilo.
Sobreposição de vídeo de fundo
Adicione uma sobreposição de gradiente ou sólida para contraste. A sobreposição fica sobre o vídeo, abaixo do conteúdo.
E é assim que se usa fundos no Webflow!