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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Essayez-le
background-size: cover;Background-position, utilisé conjointement avec background-size, l'avez-vous essayé
?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 estCSS3 Media Query.
J'utilise habituellement 2 solutions :
- mise en page, taille de police, images économes en flux adaptées
S'il s'agit de développement de composants, vous pouvez toujours utiliser
pour définir lesSystème de disposition de grille à 12 colonnes (largeur, flotteur, réponse séquentielle) ;
position属性或flex) ;paramètres en ligne
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).props, 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'attributbackground-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 !