Maison  >  Article  >  interface Web  >  Puis-je ajouter plusieurs images d’arrière-plan au HTML ?

Puis-je ajouter plusieurs images d’arrière-plan au HTML ?

青灯夜游
青灯夜游original
2021-12-14 12:56:329105parcourir

html peut ajouter plusieurs images d'arrière-plan. En HTML, vous pouvez définir plusieurs images d'arrière-plan pour un conteneur via background-image ou background, c'est-à-dire placer différentes images d'arrière-plan dans un seul élément de bloc ; la syntaxe est "background: url (adresse de l'image), url (adresse). .;

Puis-je ajouter plusieurs images d’arrière-plan au HTML ?

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En HTML, vous pouvez définir plusieurs images d'arrière-plan pour un conteneur via background-image ou background, ce qui signifie que vous pouvez placer différentes images d'arrière-plan dans un seul élément de bloc.

Tout d'abord, jetons un coup d'œil à la syntaxe :

background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment] | [background-position]

Utilisez des virgules pour séparer les URL de plusieurs images d'arrière-plan s'il y a plusieurs images d'arrière-plan et un seul autre attribut (par exemple, il n'y a qu'une seule répétition d'arrière-plan), alors toutes les images d'arrière-plan se voient appliquer cette valeur de propriété.

Regardons un exemple :

body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}

Puis-je ajouter plusieurs images d’arrière-plan au HTML ?

Tutoriel recommandé : "Tutoriel vidéo html"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn