html5 - Bagaimana untuk menjadikan imej latar belakang dipaparkan dalam skrin penuh pada telefon bimbit (kandungannya agak panjang dan mempunyai bar skrol), memastikan imej tidak cacat?

Question

Halaman web mudah alih saya memerlukan imej latar belakang Bagaimana saya boleh membuat imej latar belakang dipaparkan dalam skrin penuh tanpa ubah bentuk?
Dengan tetapan semasa saya, latar belakang menjadi cacat! Mintalah kepada Tuhan!

Answer 1

saiz latar belakang: 100% auto;

Answer 2

Anda boleh cuba untuk tidak menetapkan imej latar belakang, tetapi gunakan teg img untuk memaparkan imej latar belakang.

<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

saiz latar: penutup; anda perlu menetapkan lebar dalam badan dan HTML dahulu

Answer 4

Anda ingin memaparkan imej sepenuhnya tanpa meregangkannya Jika anda benar-benar taksub dengan ini, sila sediakan pelan rujukan untuk reka bentuk:
Selepas merapikan garis besar imej, tambahkan warna latar belakang, dan kemudian dapatkan nilai warna. warna latar belakang imej. Tetapkan atribut css dalam main_bg:

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