So fügen Sie in Uniapp ein Hintergrundbild auf einer Seite ein

Da die Entwicklung mobiler Anwendungen immer beliebter wird, ist die Entwicklung plattformübergreifender mobiler Anwendungen allmählich zu einem Trend geworden. Als plattformübergreifendes Entwicklungstool liegen die Vorteile von UniApp auf der Hand. Bei der Entwicklung von UniApp ist es häufig erforderlich, ein Hintergrundbild festzulegen, um die Seite zu verschönern und Benutzern eine bessere Nutzung der Anwendung zu ermöglichen. Wie fügt UniApp also ein Hintergrundbild auf eine Seite ein? Lass es uns gemeinsam besprechen.

Zuerst müssen wir ein Hintergrundbild vorbereiten, das ein einfarbiges Bild oder ein Musterhintergrundbild sein kann. Anschließend können wir einen Stil hinzufügen, bei dem das Ansichts-Tag zum Festlegen des Hintergrundbilds verwendet wird. Zum Beispiel:

<view class='bg' style='background-image:url("/static/images/bg.jpg");'></view>

Auf diese Weise brauchen wir Fügen Sie die .bg-Klasse wie folgt zur Stildatei hinzu:

.bg{
Breite: 100 %;
Höhe: 100 %;
Hintergrundgröße: Cover;
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition : center center;
}

Hier müssen wir beachten, dass der Bildpfad einen relativen oder einen absoluten Pfad verwenden muss. Der Standard-Bildpfad von UniApp ist /static/. Gleichzeitig müssen wir die Größe und Position des Bildes festlegen. Hier verwenden wir das Cover-Attribut und das Center-Attribut.

Wenn wir ein Vollbild-Hintergrundbild festlegen müssen, können wir den folgenden Code in die Datei uni.scss einfügen:

page{
height: 100%;
.bg{

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

}
}

Hier verwenden wir Das Positionsattribut wird verwendet, um die Position des Elements festzulegen, und die Attribute oben, links, rechts und unten werden verwendet, um die Position zu bestimmen, die das Element einnimmt. Schließlich wird der Effekt der Vollbildanzeige erreicht.

Natürlich können wir das globale Hintergrundbild auch über uni-app-preview definieren. Die spezifische Methode ist wie folgt:

Fügen Sie den folgenden Code zum Style-Tag in der App.vue-Datei hinzu:

<style>
uni-app-preview{

background-image:url("/static/images/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;

}
</style>

We Verwenden Sie nur diese Methode. Sie muss in der App.vue-Datei definiert werden, um das globale Hintergrundbild festzulegen.

Kurz gesagt, UniApp bietet viele Möglichkeiten, Hintergrundbilder festzulegen, und wir müssen entsprechend unseren eigenen Bedürfnissen und Szenarien auswählen. Die oben genannten Methoden sind nur einige der Methoden, die Sie entsprechend der tatsächlichen Situation auswählen können. Da sich UniApp weiterentwickelt und verbessert, glaube ich, dass es immer bequemere Möglichkeiten zum Festlegen von Hintergrundbildern geben wird.

Das obige ist der detaillierte Inhalt vonSo fügen Sie in Uniapp ein Hintergrundbild auf einer Seite ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!