Travailler avec des images d'arrière-plan et des propriétés CSS

Comment définir l'image d'arrière-plan de la page Web avec CSS et optimiser le chargement? Tout d'abord, sélectionnez l'image d'arrière-plan appropriée, sélectionnez JPG / WebP / PNG Format en fonction de l'objectif et faites attention au droit d'auteur dans un style unifié; Deuxièmement, utilisez les attributs CSS pour définir l'image d'arrière-plan, y compris le chemin d'image d'arrière-plan, le chemin du chemin, la duplication de contrôle de répétition d'arrière-plan, l'adaptation de la taille de l'arrière-plan et de la position d'arrière-plan à l'écran; Troisièmement, optimisez la vitesse de chargement, améliorez l'expérience utilisateur en compressant les images, en utilisant le format WebP, en retardant le chargement, en ajoutant des effets de transition et en réglant les couleurs de transition.

Dans la conception Web, les images d'arrière-plan sont un élément important pour améliorer l'attrait visuel. Mais si vous voulez bien l'utiliser, l'ajout d'une image ne suffit pas. Vous devez correspondre aux paramètres raisonnables des attributs CSS pour rendre la page bonne et stable.

Comment choisir la bonne image d'arrière-plan?

Plus la sélection d'images est élevée, mieux c'est, mieux c'est. Il doit être jugé en fonction de l'objectif. S'il s'agit d'un fond de grande image décoratif, vous pouvez choisir un format JPG ou WebP compressé; Si de petites icônes ou motifs avec fond transparent sont nécessaires, la PNG est plus appropriée. De plus, le style d'image devrait également être cohérent avec le site Web global pour éviter la confusion visuelle.

Vous devez également prêter attention aux problèmes de droit d'auteur, et ne pas simplement télécharger des photos sur Internet et les utiliser directement. Vous pouvez utiliser des ressources à partir de galeries de photos gratuites telles que Unsplash et Pixabay, ou créer vous-même du contenu original.

Quelles sont les propriétés CSS couramment utilisées pour définir des images d'arrière-plan?

background-image est la propriété la plus basique utilisée pour spécifier le chemin d'image:

 Image de fond: URL ('bg.jpg');

Si vous souhaitez également que l'arrière-plan ne soit pas couvert de répétitions répétées, ajoutez background-repeat: no-repeat; . De cette façon, l'image n'est affichée qu'une seule fois, ce qui convient à l'arrière-plan de la grande image de la page d'accueil.

Afin de s'assurer que les images sont adaptées à différentes tailles d'écran, il est recommandé d'ajouter:

• background-size: cover; (L'image est mise à l'échelle dans un rapport uniforme, couvrant le conteneur entier)
• background-position: center; (alignement central)

Ceux-ci peuvent faire en sorte que l'image d'arrière-plan fonctionne bien sur divers appareils.

Comment optimiser la vitesse de chargement et l'expérience utilisateur?

Une grande image d'arrière-plan est un problème courant, le chargement lent est qu'il existe plusieurs façons de soulager ce problème:

• Compression d'image: utilisez des outils tels que TinYPNG et ImageOptim pour réduire la taille du fichier.
• Utilisation de formats modernes: WebP a des taux de compression plus élevés et n'est pas de qualité de qualité que JPEG et PNG.
• Chargement paresseux: Pour les images d'arrière-plan qui ne sont pas sur le premier écran, la technologie de chargement paresseuse peut être utilisée pour attendre que l'utilisateur défile vers la zone correspondante avant le chargement.
• Ajoutez un effet de fondu: ce sera un peu brusque lorsque l'image apparaît soudainement lors du chargement. Vous pouvez utiliser CSS pour passer pour le faire apparaître lentement.

Vous pouvez également envisager de définir une couleur de transition pour les zones qui n'ont pas été chargées, telles que:

 Color d'arrière-plan: # f5f5f5;

De cette façon, même si l'image n'a pas été chargée, la page ne semblera pas avoir l'air d'espace.

Fondamentalement, c'est tout. La clé pour faire bon usage des images d'arrière-plan est d'équilibrer la beauté et les performances, et de ne pas poursuivre aveuglément une qualité d'image élevée et d'ignorer l'expérience de chargement.

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!