Bagaimana untuk meletakkan imej latar belakang pada halaman dalam uniapp

Apabila pembangunan aplikasi mudah alih menjadi semakin popular, pembangunan aplikasi mudah alih merentas platform secara beransur-ansur menjadi trend. Sebagai alat pembangunan merentas platform, kelebihan UniApp terbukti dengan sendirinya. Dalam pembangunan UniApp, selalunya perlu untuk menetapkan imej latar belakang untuk mencantikkan halaman dan membolehkan pengguna menggunakan aplikasi dengan lebih baik. Jadi, bagaimanakah UniApp meletakkan imej latar belakang pada halaman? Mari kita bincangkan bersama.

Pertama, kita perlu menyediakan imej latar belakang, yang boleh menjadi imej warna pepejal atau imej latar belakang corak. Kemudian, kita boleh memilih untuk menambah gaya di mana teg paparan digunakan untuk menetapkan imej latar belakang. Contohnya:

Dengan cara ini, kita perlu menambah kelas .bg dalam fail gaya seperti berikut:

.bg{
lebar: 100%;
tinggi: 100%;
latar belakang- size: cover;
background-repeat: no-repeat;
background-position: center center;
}

Di sini, kita perlu ambil perhatian bahawa laluan imej perlu menggunakan relatif laluan Atau laluan mutlak laluan imej lalai UniApp ialah /statik/. Pada masa yang sama, kita perlu menetapkan saiz dan kedudukan imej Di sini kita menggunakan atribut penutup dan atribut tengah.

Jika kita perlu menetapkan imej latar belakang skrin penuh, maka kita boleh menambah kod berikut pada fail uni.scss:

halaman{
ketinggian: 100%;
.bg {

position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;

}
}

Di sini kita menggunakan atribut kedudukan untuk menetapkan kedudukan elemen dan menggunakan atribut atas, kiri, kanan dan bawah untuk menentukan kawasan yang diduduki oleh unsur Lokasi. Akhirnya, kesan paparan skrin penuh dicapai.

Sudah tentu, kami juga boleh menentukan imej latar belakang global melalui pratonton-uni-apl. Kaedah khusus adalah seperti berikut:

Tambahkan kod berikut pada teg gaya dalam fail App.vue:

Dengan kaedah ini, kami hanya perlu mentakrifkannya dalam fail App.vue untuk menetapkan imej latar belakang global.

Ringkasnya, UniApp mempunyai banyak cara untuk menetapkan imej latar belakang, dan kita perlu memilih mengikut keperluan dan senario kita. Di atas hanyalah beberapa kaedah, dan anda boleh memilih mengikut situasi sebenar. Memandangkan UniApp terus membangun dan menambah baik, saya percaya akan ada lebih banyak cara yang mudah untuk menetapkan imej latar belakang.

Atas ialah kandungan terperinci Bagaimana untuk meletakkan imej latar belakang pada halaman dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!