Image de fond (propriété CSS)-tutoriel CSS-php.cn

background-image (CSS property)

Image de fond (propriété CSS)

Description

Cette propriété définit l'image d'arrière-plan d'un élément via l'URI spécifié. L'image est placée sur la couleur d'arrière-plan, et si l'image est opaque, la couleur d'arrière-plan ne sera pas visible en dessous. Lorsque vous définissez une image en arrière-plan, définissez également une couleur d'arrière-plan, dans la mesure du possible, au cas où l'image n'est pas disponible. L'arrière-plan d'un élément est la zone couverte par la largeur et la hauteur de cet élément (que ces dimensions soient définies explicitement, ou que le contenu les dicte); Il comprend également la zone couverte par le rembourrage et les frontières. Une couleur d'arrière-plan (ou l'image d'arrière-plan) appliquée à un élément apparaîtra sous le contenu de premier plan de cet élément, et la zone couverte par le rembourrage et les propriétés de la frontière pour l'élément. Cette zone de couverture est évidente où un élément a une transparence (ou en pointillé ou en pointillés) frontières, et l'arrière-plan est vu sous les bordures (ou entre les points). Notez que les versions Internet Explorer jusqu'à et incluant 6 ne prennent pas en charge les frontières transparentes. Une zone de l'élément en question doit être visible afin que l'image d'arrière-plan puisse se manifester. Si l'élément n'a pas de hauteur intrinsèque (définie par son contenu ou ses dimensions), l'arrière-plan n'aura aucun espace dans lequel afficher. Si un élément ne contient que des enfants flottants qui n'ont pas été effacés - voyez clairement - encore une fois, l'arrière-plan ne s'affichera pas, car la hauteur de l'élément sera nulle. Par défaut, l'image d'arrière-plan est placée au niveau supérieur gauche (position d'arrière-plan) de l'élément; Il est répété le long des axes x et y (répétition d'arrière-plan) et fera défiler avec le document. Ce sont les paramètres par défaut qui s'appliquent si vous n'en avez pas explicitement en définissant d'autres et que vous pouvez être ajusté avec les autres propriétés d'arrière-plan. Reportez-vous aux autres éléments pertinents ci-dessous pour les méthodes que vous pouvez utiliser pour positionner et contrôler l'image.

Exemple

Cette règle de style attribue un arrière-plan Image à l'élément avec ID "Exemple":

#example {
  background-image:
  ➥    url(images/bg.gif);
}

Copier après la connexion

valeur

Une valeur d'URI Spécifie un emplacement dans lequel l'image peut être trouvée. La valeur aucune ne garantit qu'aucune image d'arrière-plan ne sera affichée; Il s'agit du paramètre par défaut, vous n'avez donc pas besoin de le définir explicitement, sauf si vous souhaitez remplacer les déclarations précédentes de l'image d'arrière-plan. L'héritage de la valeur ferait hériter de l'élément l'image d'arrière-plan de son parent. Cette approche ne serait normalement pas adoptée, car l'image d'arrière-plan héréditaire de l'élément chevaucherait très probablement l'image du parent. Dans la plupart des cas, l'image d'arrière-plan du parent sera visible à travers le fond transparent de l'élément, à moins qu'une autre image d'arrière-plan ou couleur d'arrière-plan ait été définie.

Questions fréquemment posées (FAQ) sur l'image d'arrière-plan CSS

Comment puis-je définir une image d'arrière-plan pour couvrir l'élément entier dans CSS?

Pour faire une image d'arrière-plan de l'élément entier, vous pouvez utiliser la propriété ``-taille '' avec la valeur «couverture» . Cela réduira l'image aussi grande que possible pour remplir le conteneur, tout en maintenant son rapport d'aspect. Voici un exemple:

Body {
Background-Image: url ('image.jpg');
Backgrack-Size: Cover;
}
Cela fera la couverture d'image L'ensemble du corps de la page Web.

Comment puis-je positionner une image d'arrière-plan dans CSS?

La propriété 'Position background' dans CSS vous permet de positionner un arrière-plan image. Vous pouvez spécifier la position en termes de pourcentages, de pixels ou de mots clés comme «top», «bas», «gauche», «droite», «centre». Voici un exemple:

Body {
Background-Image: url ('image.jpg');
position d'arrière Dans le coin supérieur droit du corps.

Comment puis-je répéter une image d'arrière-plan dans CSS?

La propriété 'repeat' repeat 'en CSS vous permet de contrôler la répétition d'une image d'arrière-plan. Les valeurs peuvent être «répéter», «répéter-x», «répéter» ou «non-répétition». Voici un exemple:

Body {
background-image: url ('image.jpg');
background-repeat: repeat-x;
}
Cela répétera le image horizontalement à travers le corps.

Comment puis-je définir plusieurs images d'arrière-plan dans CSS?

CSS vous permet de définir plusieurs images d'arrière-plan pour un élément en spécifiant Chaque image de la propriété «Image d'arrière-plan», séparée par des virgules. La première image de la liste est le calque le plus haut. Voici un exemple:

Body {
Background-Image: url ('image1.jpg'), url ('image2.jpg');
}
Cela définira deux images d'arrière-plan pour le corps.

Comment puis-je créer une image d'arrière-plan fixée dans CSS?

La propriété «Attachement d'arrière-plan» dans CSS vous permet de faire un arrière-plan Image fixe, donc il ne fait pas défiler avec le reste de la page. Voici un exemple:

Body {
Background-Image: url ('image.jpg');
Attachement d'arrière-plan: fixe;
}
Cela fera l'image d'arrière-plan fixe.

Comment puis-je définir une image d'arrière-plan à partir d'une URL externe dans CSS?

Vous pouvez définir une image d'arrière-plan à partir d'une URL externe en spécifiant l'URL dans la propriété «Image d'arrière-plan». Voici un exemple:

Body {
background-Image: url ('https://example.com/image.jpg');
}
Cela définira l'image d'arrière-plan à partir de L'URL spécifiée.

Comment puis-je définir une couleur de secours pour une image d'arrière-plan en CSS?

Vous pouvez définir une couleur de secours pour une image d'arrière-plan par Spécifier la couleur dans la propriété «Color d'arrière-plan». Cette couleur sera affichée si l'image d'arrière-plan ne peut pas être chargée. Voici un exemple:

Body {
Background-Image: url ('image.jpg');
Background-Color: # f00;
}
Cela définira un rouge Couleur de secours pour l'image d'arrière-plan.

Comment puis-je mélanger une image d'arrière-plan avec une couleur d'arrière CSS vous permet de mélanger une image d'arrière-plan avec une couleur d'arrière-plan. Voici un exemple:

Body {
background-image: url ('image.jpg');
background-Color: # f00;
Background-Blend-mode: Multiply;
}
Cela mélangera l'image d'arrière CSS?

Vous pouvez définir une image d'arrière-plan pour un élément spécifique en spécifiant le sélecteur d'élément avant la propriété «Image d'arrière-plan». Voici un exemple:

#myelement {

background-image: url ('image.jpg');

}
Cela définira l'image d'arrière-plan pour l'élément avec l'ID 'Myelement '.

Comment puis-je définir une image d'arrière-plan pour un pseudo-élément dans CSS?

Vous pouvez définir une image d'arrière-plan pour un pseudo-élément en spécifiant le sélecteur pseudo-élémentaire avant la propriété «IMAGE D'ABTENIR». Voici un exemple: