Como criar várias CSS3 Imagem de Fundo

É possível combinar várias imagens em uma única imagem ao trabalhar com os navegadores CSS3-capable. Pelo menos uma das imagens deve ter regiões transparentes que permitem a segunda imagem a espreitar para fora atrás dele. O procedimento a seguir modifica o exemplo SingleImage para conter duas imagens. A segunda imagem é fornecida com fonte de download como PawPrint.GIF.

No entanto, você pode facilmente substituir uma imagem de sua preferência, em vez (desde que a imagem tenha as regiões transparentes exigidos).

1. Abra o arquivo SingleImage.CSS.

2. Modificar o estilo de corpo para que a propriedade background-image agora contém duas imagens, como mostrado aqui.

   body {background-image: url ( "PawPrint.gif"), 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 ela aparece sobre a parte superior da segunda imagem. Se você inverter as entradas, a imagem sem transparências será em cima e você verá apenas uma imagem.

3. Salve o arquivo CSS como MulitpleImage.CSS.

4. Abra o arquivo SingleImage.HTML.

5. modificar o

6. Salve o arquivo HTML como MultipleImage.HTML.

7. Carregar a página MultipleImage.

   Você vê ao fundo. Observe como as cópias da pata sobrepor a imagem original, mas não ocultá-lo completamente.