Como criar vários imagem css3 fundos
Video: CSS3 - Aula 04 - background - Parte 1
Conteúdo
É possível combinar várias imagens em uma única imagem quando se trabalha com navegadores CSS3-capable. Pelo menos uma das imagens deve ter regiões transparentes que permitem a segunda imagem a espreitar por detrás dele. O procedimento a seguir modifica o exemplo SingleImage para conter duas imagens. A segunda imagem é fornecido com fonte descarregável como PawPrint.jpg.
No entanto, você pode facilmente substituir uma imagem de seu gosto em vez (desde que a imagem tenha as regiões transparentes exigidos).
Abra o arquivo SingleImage.CSS.
Modificar o estilo de corpo para que a propriedade background-image agora contém duas imagens, como mostrado aqui.
Video: Photoshop - Como Criar um Render (Imagem com Fundo Transparente)
body {background-image: url ("PawPrint.jpg"), Url ("CuteCat.jpg") -background-color: SaddleBrown-color: SeaGreen-font-size: x-large-text-shadow: 1px 1px amarelo-}Observe que as duas entradas de imagem são separadas por uma vírgula - não muitas propriedades multi-entrada requerem vírgulas, mas este é um deles. A ordem em que as imagens aparecem também é importante. A imagem que contém a transparência deve aparecer em primeiro lugar, porque ele aparece por cima da segunda imagem. Se você inverter as entradas, a imagem sem transparências será em cima e você verá apenas uma imagem.
Salve o arquivo CSS como MulitpleImage.CSS.
Abra o arquivo SingleImage.HTML.
Video: Tutorial: Slideshow com CSS3(sem javascript)
modificar o
Um Fundo Imagem Múltipla
Salve o arquivo HTML como MultipleImage.HTML.
Carregar a página MultipleImage.
Você vê o fundo. Observe como a pata imprime sobrepor a imagem original, mas não escondê-lo completamente.
