Comment créer plusieurs arrière-plans CSS3 Image - Nuls

Il est possible de combiner plusieurs images en une seule image lorsque vous travaillez avec des navigateurs compatibles CSS3. Au moins l'une des images doit avoir des zones transparentes qui permettent à la seconde image d'apparaître derrière elle. La procédure suivante modifie l'exemple SingleImage pour contenir deux images. La seconde image est fournie avec une source téléchargeable comme PawPrint. GIF.

Cependant, vous pouvez facilement remplacer une image de votre choix (à condition que l'image possède les zones transparentes requises).

1. Ouvrez SingleImage. Fichier CSS.

2. Modifiez le style de corps afin que la propriété d'image d'arrière-plan contienne désormais deux images, comme illustré ici.

   body {background-image: url ("PawPrint.gif"), url ("CuteCat.jpg"); couleur de fond: SaddleBrown; couleur: SeaGreen; taille de police: x-large; text-shadow: 1px 1px Yellow;}
   

   Notez que les deux entrées d'image sont séparées par une virgule - peu de propriétés multi-entrées requièrent des virgules, mais c'est l'une d'entre elles. L'ordre dans lequel les images apparaissent est également important. L'image contenant la transparence doit apparaître en premier car elle apparaît au-dessus de la deuxième image. Si vous inversez les entrées, l'image sans transparents sera sur le dessus et vous verrez une seule image.

3. Enregistrez le fichier CSS en tant que MulitpleImage. CSS.

4. Ouvrez l'image unique. Fichier HTML

5. Modifiez les balises et afin qu'elles ressemblent à ceci:

   Un fond d'image multiple
   

6. Enregistrez le fichier HTML sous MultipleImage. HTML

7. Chargez la page MultipleImage.

   Vous voyez l'arrière-plan. Remarquez comment les empreintes de patte recouvrent l'image originale mais ne la dissimulent pas complètement.