Comment utiliser l'image d'arrière-plan flottante en marge

Cette fois, je vais vous montrer comment utiliser les images d'arrière-plan flottantes en marge, et quelles sont les précautions lors de l'utilisation d'images d'arrière-plan flottantes en marge. Voici un cas pratique, jetons un coup d'œil.

Aujourd'hui, trions les problèmes rencontrés lors de la création de pages Web

1. Insérez une image de fond et placez l'image en bas de p pour remplir le. rangée entière.

<style>
    background:url(xxx.jpg) no-repeat;
    background-position:bottom; 
    background-size:100%;</style>

Attributs :

Position d'arrière-plan : L'attribut de position d'arrière-plan est utilisé pour définir la position de l'image d'arrière-plan . Cet attribut ne peut être appliqué qu'aux éléments de niveau bloc et aux éléments remplacés. Les éléments de remplacement incluent img, input, textarea et select.

Il existe deux types de valeurs de syntaxe : la longueur et le mot-clé.

Longueur : définissez la valeur horizontale (axe des x) et la valeur verticale (axe des y) telles que : background-position : 10px 20px

Mots-clés : en haut à gauche (en haut à gauche), en haut au centre (en haut au centre), etc. Si la deuxième valeur n'est pas définie, la valeur par défaut est centre.

Taille d'arrière-plan : Définissez la taille de l'image d'arrière-plan.

Valeur d'attribut 1.length : La première valeur est la largeur, la deuxième valeur est la hauteur, si seule la première valeur est définie, alors la deuxième valeur sera automatiquement convertie en " auto »

2.percentage : définissez la largeur et la hauteur de l'image en pourcentage de l'élément parent. La première valeur est la largeur et la deuxième valeur est la hauteur. Si une seule valeur est définie, la deuxième valeur sera définie sur « auto ».

3.cover : L'image d'arrière-plan s'agrandit pour couvrir entièrement la zone (rapport inégal)

4.contain : L'expansion de l'image d'arrière-plan couvre complètement la zone (rapport égal)

2.problème de marge

　 (1) marge : auto auto ; Pourquoi ne peut-il pas être centré verticalement

Il ne prend pas en charge l'auto supérieur et inférieur car il est difficile de déterminer la hauteur dans la page

(2) La différence entre la marge et le remplissage

　Marge : lorsque vous devez ajouter de l'espace en dehors de la bordure. Quand ils doivent s’annuler. Par exemple, une marge de 15px + 20px donnera une marge de 20px.

Rembourrage : besoin d'ajouter de l'espace à l'intérieur de la bordure. Le besoin est égal à la somme des deux. Par exemple, un remplissage de 15 px + 20 px entraînera un espace vide de 35 px.

(3) Cela n'a aucun effet sur les marges supérieure et inférieure des éléments en ligne .

3.problème de flotteur

(1) Lorsque le p arrière dérive vers la gauche vers le p supérieur, le texte dans le p supérieur s'enroulera autour du p dérivé

Pertinent pour le flux de documents, voir 4

4. Flux de documents

C'est pendant le processus de composition et de mise en page des éléments. , les éléments seront automatiquement disposés de gauche à droite et de haut en bas.

Rompre avec le flux documentaire signifie retirer des éléments de la mise en page et de la composition ordinaires, et positionner des éléments de bloc Le temps comme si l’élément dérivant n’existait pas. Les flotteurs absolus et flottants dans le positionnement se détacheront du flux de documents.

Partiellement ignoré : float est hors du flux de documents. Les autres boîtes ignoreront cet élément, mais le. contenu à l'intérieur de la boîte L'élément de connexion quittera la position de dérive et existera autour d'elle.

Ignorer complètement : Absolute est hors du flux de documents. Les autres boîtes, y compris les éléments en ligne dans la boîte, ignoreront complètement l'élément positionné.

La marge et le flottant ne peuvent pas être utilisés en même temps

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Commande Gulp pour générer des sprites

Le texte de la liste déroulante de sélection du navigateur Safari est trop long et n'enveloppe pas la solution
Explication détaillée de la syntaxe BEM

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!