html5 - Comment faire en sorte que l'image de fond s'affiche en plein écran sur le téléphone mobile (le contenu est relativement long et comporte des barres de défilement), en s'assurant que l'image ne soit pas déformée ?

Question

Ma page Web mobile a besoin d'une image d'arrière-plan. Comment puis-je afficher l'image d'arrière-plan en plein écran sans déformation ?
Avec mes paramètres actuels, le fond est déformé ! Demander à Dieu!

Answer 1

taille de l'arrière-plan : 100 % automatique ;

Answer 2

Vous pouvez essayer de ne pas définir d'image d'arrière-plan, mais d'utiliser la balise img pour afficher l'image d'arrière-plan.

<p class="page">
    <img class="bg"/>
    <p class="page_Con">
    </p>
</p>

.page{position:relative;height: 100%;overflow:auto;}
.bg{width:100%;height:100%;}
.page_Con{position:absolute;top:0;left:0;width:100%;height:100%;}

Answer 3

background-size : cover ; vous devez d'abord définir la largeur du corps et du HTML

Answer 4

Vous souhaitez afficher entièrement l'image sans l'étirer. Si cela vous obsède vraiment, veuillez fournir un plan de référence pour le design :
Après avoir adouci le contour de l'image, ajoutez une couleur d'arrière-plan, puis obtenez la valeur de couleur de la couleur d'arrière-plan de l'image. Définissez les attributs CSS dans main_bg :

background-color: white;// 拿到的图片背景色
background-image: url('链接');
background-size: 95%;  //可以写成固定值
background-repeat: no-repeat;
background-position: center;