css - Comment écrire une mise en page réactive avec des images d'arrière-plan

Question

De la même manière, je veux maintenant créer un composant avec une image d'arrière-plan, mais l'image d'arrière-plan ne peut pas avoir une taille à 100 %, et il doit alors y avoir du contenu au milieu, une image à gauche et du texte à droite. rendez-le réactif

Answer 1

Essayez-le background-size: cover;

Answer 2

Background-position, utilisé conjointement avec background-size, l'avez-vous essayé

?

Answer 3

Vous pouvez étudier attentivement certaines pages d'Apple. Certaines de ses pages utilisent des images d'arrière-plan et sont adaptatives - bien sûr, leur mise en page est également relativement simple. Son principe est CSS3 Media Query.

J'utilise habituellement 2 solutions :

• Système de disposition de grille à 12 colonnes (largeur, flotteur, réponse séquentielle) ;

Adaptation de Media Query (utilisation
• mise en page, taille de police, images économes en flux adaptées

  position 属性或 flex) ;

S'il s'agit de développement de composants, vous pouvez toujours utiliser

pour définir les

paramètres en ligneprops, puis le composant déterminera en interne le style de mise en page (plusieurs mises en page sont prédéfinies ) ; Pour les images d'arrière-plan, vous pouvez utiliser l'attribut

pour implémenter l'affichage adaptatif des images (remplissage automatique), ou vous pouvez utiliser Media Query pour spécifier différents affichages sur différents appareils (par exemple : les images du bureau ont une largeur plus large que la hauteur, les images mobiles verticales les images à l'écran ont une hauteur supérieure à une largeur) ) images (économiser du trafic).

background-size 或 background-position: center centerJe pense : essayez de ne pas utiliser l'arrière-plan dans le cadre de la mise en page du contenu, à moins que le concepteur ne vous fournisse suffisamment de tailles et de plans adaptés à l'image !