A propriedade de imagem em segundo plano permite especificar uma imagem a ser exibida em segundo plano. Ele pode ser usado em conjunto com a cor de fundo; portanto, se a imagem não for repetida, a cor do plano de fundo será preenchida com a cor de fundo se a imagem não puder ser coberta. O código é simples, lembre -se de que o caminho é relativo à folha de estilo, portanto, no código a seguir, a imagem e a folha de estilo estão no mesmo diretório
Para fotos, primeiro pensamos na imagem de fundo. Porque muitas de nossas decorações são alcançadas com fotos de fundo. Como é esse o caso, vamos começar com a imagem de fundo do CSS Control.
Definição e usoA propriedade de imagem em segundo plano define a imagem de fundo para o elemento.
O fundo de um elemento ocupa todas as dimensões do elemento, incluindo as margens e fronteiras internas, mas não as margens externas.
Por padrão, a imagem de fundo está localizada no canto superior esquerdo do elemento e é repetida horizontal e verticalmente.
1. CSS Control Background Picture:Para uma página da web, quando começamos a projetar, podemos não pensar muito sobre o que era a imagem de fundo, porque a maioria deles só precisa projetar cores de fundo. Eu acho que é muito simples, porque é o mesmo que a música de primeiro plano, e a velocidade da abertura da página da web terá um certo impacto. No entanto, para sites pessoais em geral ou blogs pessoais, é claro que é indispensável mostrar sua própria personalidade. Claro, nada não será muito perfeito. Há coisas boas e coisas ruins. Ou seja, quando a imagem não está disponível, mas o CSS está disponível, o conteúdo de substituição não será exibido. Portanto, não é recomendável usar imagens de fundo CSS no texto do botão de navegação ou situações similares.
Existem muitos atributos CSS que controlam imagens de fundo, e a maioria deles será usada desde que estejam relacionados à imagem.
(1) Importar imagens de fundo:Obviamente, com o que todos estão mais familiarizados é o fundo e o fundo.
O código para projetar imagens de fundo para páginas da web é:
corpo {background: url (d: /images/04.jpg)}
ou
Corpo {Background-Image: URL (d: /images/04.jpg)}
Dessa forma, podemos importar as imagens que queremos usar como plano de fundo na página da web.
(2) Como exibir imagens de fundo:Obviamente, usar o código acima por si só não poderá expressar o efeito desejado. Porque se a imagem for pequena, ela será azulada de maneira plana. Se for grande, para exibi -lo, uma barra de rolagem aparecerá, o que não é bom. Portanto, temos que usar a repetição de fundo para controle de exibição.
É o valor:
Repita: valor padrão. Imagem de fundo ladrilho em retrato e direção horizontal
sem repetição: a imagem de fundo não está em azulejo
repetição-x: a imagem de fundo é apenas na horizontal
Repita-y: a imagem de fundo é azulejo apenas na direção vertical
Quanto ao código, acho que quem conhece um pouco de CSS sabe disso, como segue
:
Corpo {Background: URL (d: /images/04.jpg); fundo-repeat: No-REPEAT}
Dessa forma, ele é exibido no tamanho da imagem original.
(3) Controle do tamanho da imagem de fundo:Mas a questão é: e se a imagem for muito grande? Para uma boa página da web, é melhor não usar imagens muito grandes. O motivo também foi mencionado acima, o que afeta a velocidade de abrir a página da web. É melhor usarmos PS ou fogos de artifício para lidar com isso. Mas desde que eu mencionei, não temos medo de usar o CSS para controlar o tamanho da imagem.
Eu acho que muitas pessoas usarão naturalmente o seguinte código:
Copie o código