CSS é um acrônimo para Cascading Style Sheets. É uma linguagem de design simples, mas poderosa, que tem a capacidade de transformar páginas da web. Em termos simples, ele agiliza o processo de tornar as páginas da web apresentáveis e atraentes para os usuários com a ajuda de . Neste artigo, entenderemos como implementar várias imagens de plano de fundo em CSS na seguinte ordem:
- Imagem de fundo nas propriedades CSS
- Imagem de fundo em CSS
- fundo de repetição
- Anexo de Fundo
- Posição de fundo
- Imagem de fundo em tamanho CSS
- Cor de fundo
Imagem de fundo nas propriedades CSS
Existem muitas propriedades que são usadas para controlar o comportamento e o posicionamento da imagem. Essas propriedades são:
- imagem de fundo
- fundo de repetição
- anexo de fundo
- posição de fundo
- tamanho do fundo
- cor de fundo
Vamos nos familiarizar com cada uma dessas propriedades e ver quando e como usá-las com algumas demonstrações interessantes.
Imagem de fundo em CSS
o imagem de fundo a propriedade como o nome sugere é simplesmente usada para indicar e definir a imagem de fundo por meio de um elemento em uma página da web. Uma imagem de fundo por padrão é colocada no canto superior esquerdo de um elemento.
sintaxe: imagem de fundo: url | nenhum | gradiente linear | gradiente radial
body {background-image: url ('apple.jpg')}fundo usando url
Vamos entender os parâmetros:
- url: A entrada para este parâmetro nos permite especificar um caminho de arquivo para qualquer imagem ou o URL para a imagem que precisa ser definida como plano de fundo. Para declarar mais de uma imagem, os URLs são separados por uma vírgula delimitadora.
body {background-image: url ('apple.jpg')} 
- Nenhum: Este é o valor padrão da propriedade e nenhuma imagem de plano de fundo é renderizada se seu valor for especificado.
corpo {fundo: nenhum}- Gradiente linear(): A imagem de fundo é definida como um gradiente linear. É necessário especificar pelo menos duas cores para esta propriedade, ou seja, de cima para baixo.
corpo {cor de fundo: # 001 imagem de fundo: gradiente linear (branco 15%, transparente 16%), gradiente linear (branco 15%, transparente 16%) tamanho do fundo: 60px 60px posição do fundo: 0 0 30px 30px}- gradiente radial (): A imagem de fundo é definida para um gradiente radial. É necessário especificar pelo menos duas cores para esta propriedade, ou seja, do centro para as bordas.
body {background-color: # 001 background-image: radial-gradient (white 15%, transparent 16%), radial-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- gradiente linear de repetição (): Ele repete um gradiente linear. Vamos usar o mesmo exemplo que vimos acima no gradiente linear para gradiente linear de repetição e ver a diferença.
corpo {cor de fundo: # 001 imagem de fundo: gradiente linear repetitivo (branco 15%, transparente 16%), gradiente linear repetido (branco 15%, transparente 16%) tamanho do fundo: 60px 60px posição do fundo : 0 0, 30px 30px}- gradiente radial de repetição (): Ele repete um gradiente radial. Vamos explorar o mesmo exemplo que usamos acima em um gradiente radial.
corpo {cor de fundo: # 001 imagem de fundo: gradiente radial repetido (branco 15%, transparente 16%), gradiente radial repetido (branco 15%, transparente 16%) tamanho do fundo: 60px 60px posição de fundo : 0 0, 30px 30px}Fundo de reserva
É sempre aconselhável, como dica profissional, adicionar uma cor de fundo como uma opção alternativa. É uma recuperação, especialmente quando as imagens de fundo não carregam ou o fundo gradiente que definimos durante o desenvolvimento não é suportado por alguns dos navegadores antigos em que é visualizado.
Isso não prejudica a experiência do usuário e pode ser declarado assim:
corpo {background: url (apple_lost.jpg) pink}Fundo Múltiplo
Também temos a opção de definir várias imagens de fundo e isso é necessário na maioria dos casos, como uma imagem de primeiro plano e uma imagem de fundo. A ordem da imagem é importante aqui, a imagem que deveria estar na frente é declarada primeiro, e a imagem que deveria estar atrás por último é declarada em seguida.
Abaixo está o exemplo para várias imagens de fundo:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}fundo de repetição
A propriedade background-repeat é usada junto com a background-image para definir o comportamento de repetição de uma imagem. Ele especifica se e como uma imagem de fundo será repetida. A imagem de fundo por padrão é repetida tanto vertical quanto horizontalmente.
Os valores possíveis são:
- repetir - A imagem se repete tanto horizontalmente quanto verticalmente
- no-repeat - A imagem não se repete
- repeat-x - A imagem é repetida horizontalmente
- repeat-y - A imagem é repetida verticalmente
- espaço- A imagem é repetida com espaços regulares ou lacunas entre eles.
- redondo - A imagem é repetida para preencher a área sem espaços entre eles.
A sintaxe CSS para a propriedade background-repeat é:
fundo de repetição: repetir | repetir-x | repetir-y | sem repetição | espaço | rodada
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Anexo de Fundo
o anexo de fundo A propriedade é usada junto com a imagem de fundo para indicar se a imagem deve ou não rolar conforme o conteúdo é rolado. Isso significa que a imagem de fundo deve ser corrigida ou deve rolar junto com o documento em relação à visualização da janela do navegador. O valor padrão é rolar.
Os valores possíveis são:
- scroll - A imagem rola junto com a página.
- corrigido - a imagem não rola junto com a página
A sintaxe CSS para o anexo de plano de fundo é:
anexo de fundo: scroll | fixed
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Posição de fundo
o posição de fundo propriedade é usada para denotar a localização ou posicionamento de uma imagem de fundo. Os valores possíveis são:
- topo
- certo
- inferior
- esquerda
- Centro
- combinação desses valores (por exemplo, topo esquerdo)
A sintaxe CSS para a posição de fundo é:
posição de fundo: superior | direita | esquerda | inferior | centro
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Imagem de fundo em tamanho CSS
Esta propriedade é uma das mais úteis, pois permite controlar o tamanho da imagem de fundo. Existem diferentes combinações que podemos empregar com esta propriedade e obter resultados adequados. O valor padrão é auto.
Os seguintes valores podem ser usados com background-size:
- auto
- comprimento, altura e largura da imagem, por exemplo 20px 40px.
- uma porcentagem - altura e largura da imagem como uma porcentagem do elemento pai, por ex. 50% 50%.
- centro- Alinha a imagem ao centro
- cobrir, dimensionando a imagem para cobrir completamente pela área de fundo.
- conter, dimensionando a imagem para caber até sua altura e largura reais.
A sintaxe CSS para a posição de fundo é:
tamanho do fundo: valor
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, capa}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: contain, 400px 150px}Cor de fundo
Esta é a mais simples de todas as propriedades em CSS. Ele aplica cores sólidas ao fundo da página. O valor dessa propriedade pode ser especificado em cores (por exemplo, vermelho, azul etc.), valor hexadecimal e valor RGB.
A sintaxe CSS para a cor de fundo é:
cor de fundo: valor
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Isso conclui todas as propriedades que podemos usar com o plano de fundo. Sempre podemos tentar diferentes combinações das propriedades, como vimos em nossa demonstração.
converter binário para int java
CSS é essencial e deve adquirir habilidades para todos os desenvolvedores de front-end da web. Isso ajuda a projetar e estilizar o plano de fundo e a construir sites impressionantes e enriquecer a experiência do usuário. O melhor é continuar experimentando e aproveitar ao máximo essa tecnologia de front-end especial, pois ela pode fazer maravilhas e transformar dinamicamente a página.
Confira nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento o torna proficiente em habilidades para trabalhar com tecnologias da web de back-end e front-end. Inclui treinamento em Desenvolvimento Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Tem alguma questão para nós? Mencione isso na seção de comentários do blog “Imagem de fundo em CSS” e entraremos em contato com você.