Como criar uma imagem única css3 fundo
Video: CSS Labs #3 - Efeito Image Overlay CSS
Conteúdo
A maneira mais simples, mais compatível para criar um fundo CSS3 que tem pelo menos um pouco mais atraente é a utilização de uma única imagem. A imagem da direita diz muito sobre o seu site e dá continuidade entre as páginas. Como essa abordagem é padrão, você vê-lo usado em um monte de sites. Tudo que você realmente precisa saber para usá-lo é a propriedade background-image, como mostrado no procedimento a seguir.
Criar um novo arquivo de HTML5 com seu editor de texto.
Digite o seguinte código para a página HTML.
Um Fundo Imagem Única O gato bonito
A página que tem um gato bonito como um fundo.
Video: Screencast: Background CSS Preenchendo Toda a Tela
Salve o arquivo como SingleImage.HTML.
A amostra será exibido em outros locais, de modo nomenclatura é importante.
Criar um novo arquivo CSS com seu editor de texto.
Digite o seguinte informações de estilo CSS.
body {background-image: url ("CuteCat.jpg") -background-color: SaddleBrown-color: SeaGreen-font-size: x-large-text-shadow: 1px 1px amarelo-}Esta é a forma mais simples de uma imagem de fundo único. A propriedade background-image tem uma função única url () associado a ele. Apenas no caso do usuário não pode exibir a imagem (ou opta por não), você precisa definir uma cor de fundo apropriado.
Dependendo da imagem (o exemplo usa um que é particularmente difícil de trabalhar quando se trata de texto), pode ser necessário para definir a cor e tamanho do texto para tornar o conteúdo fácil de ler.
Este é um lugar onde usando a propriedade text-shadow pode fazer a diferença entre a alegria de usuário e reclamações dos usuários. Use cores contrastantes para a fonte e sombra de modo que os dois trabalham juntos para tornar o conteúdo visível contra uma imagem com uma gama de cores.
Salve o arquivo como SingleImage.CSS.
A amostra será exibido em outros locais, de modo nomenclatura é importante.
Carregar a página SingleImage.
Você vê o fundo. Observe que o gráfico começa no canto superior esquerdo e repete automaticamente conforme necessário para preencher a janela inteira.
