Criar um preenchimento de gradiente deslumbrante , como quando as cores alternativo da escuridão para a luz , em ordem crescente ou decrescente no fundo do seu site, pode ser um efeito bastante atraente. Dependendo do conteúdo , a exibição de cores pode aumentar consideravelmente textos ou imagens na página , ou chamar a atenção para informações específicas. Existem algumas maneiras de programar este efeito , exigindo apenas algumas peças simples de código HTML e folhas de estilo em cascata (CSS) . Coisas que você precisa
programa Gráficos
programa editor de texto
Show Mais instruções
simples formato HTML
1

Abra seu programa gráfico favorito, como o Gimp , Photoshop, ou Paintshop e criar uma nova imagem , que é de 5 pixels de altura e 760 pixels de largura usando uma resolução de 800 pixels. Para uma resolução de 1024 pixels, que a imagem 984 pixels de largura, em seu lugar.
2

Selecione a ferramenta de preenchimento e do efeito Gradient e escolha suas duas cores, uma a partir do ponto inicial do degradê , e outro para o ponto final.
3

Salve o arquivo em um formato JPG em diretório de imagens do seu site on-line e adicione o seguinte código no HTML da página especial, onde o , seção começa :

Substitute " nome.jpg " para seu arquivo . Sua página Web irá agora mostrar um fundo gradiente.
Usando Cascading Style Sheets em HTML
4

Criar uma folha de estilo em cascata CSS ou método de um fundo gradiente para o seu Web página fazendo primeiro uma imagem de gradiente como no exemplo anterior , só que desta vez tornando a imagem um pixel de largura e 800 pixels de altura . O padrão para visualização na maioria das telas é de 800 pixels. Salve a imagem como JPG para o diretório de imagem do seu site.
5

Abrir e digitalizar através de seu código CSS usando o seu editor de texto favorito . O arquivo será localizado no diretório site com o sufixo " . Css" . Adicione o seguinte código para o seu corpo secção CSS:

body { background: url ( images /nome.jpg ) 0% 0% repeat - x ; color: # 000000 ; height: 800px ; padding: 5px ;}

o " background: " A declaração contém o arquivo de imagem e caminho , eo " repeat- x " e " 0% 0% " está dizendo o navegador a posição inicial da imagem na xy eixo , neste caso, em 0,0 , ou no mais alto , mais à esquerda ponto da tela, e em seguida, para repetir a imagem ao longo do eixo x , ou através da página.
6

Verifique se a sua imagem é menor do que a tela quando você rolar a página . Se assim for, você vai precisar adicionar uma cor de fundo para a declaração de "fundo" em seu código CSS que coincide com a parte inferior da imagem . Desta forma , se o gradiente se esgota , o fundo vai coincidir com o fundo do gradiente

Por exemplo , se a parte inferior da imagem de gradiente é preto , o código deve ser como segue : .

body {background: # 000000 url ( images /nome.jpg ) 0% 0% repeat - x ; color: # 000000 ; height: 800px ; padding: 5px }

o "# 000000" é a interpretação hexadecimal para a cor preta. O "amor" nesta declaração substituirá o comando URL. Assim, se a imagem for muito curto, o fundo onde termina a imagem será preto .

Você pode localizar o código hexadecimal para a sua cor através da abertura de sua imagem em seu programa de gráficos e selecionar a ferramenta Conta-gotas e apontando para o conjunto inferior de pixels. Depois de escolher a cor e selecione-o em suas ferramentas, você pode encontrar o código .