So stellen Sie die Bilddehnung ohne Wiederholung in CSS ein

So legen Sie die Bilddehnung ohne Wiederholung in CSS fest: Legen Sie zuerst den Bildpfad über „background: url(“../../../static/imagic/sy.jpg“) fest und übergeben Sie dann „no-repeat“. „Stellen Sie nur sicher, dass die Attributeinstellungen die Bilder nicht duplizieren.

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer

css stellt das Hintergrundbild so ein, dass es den gesamten Bildschirm ausdehnt, ohne es zu wiederholen

Ohne weitere Umschweife, lasst uns einfach loslegen Vorwärts und das Bild anzeigen. Wir haben nur die Breite und Höhe angegeben. Diese Situation wird zu 100 % auftreten.

<template>
  <div class="hello"></div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  }
};
</script>

") - die Position des Bildpfads;

no -repeat – Das Bild wird nicht wiederholt;

center 0px – Mitte ist die Positionierung von der linken Seite der Seite, 0px ist die Positionierung von oben page;

background-position: center 0 – ist die Positionierung des Bildes, die gleiche wie oben;

background -size: cover; – – Erweitern Sie das Hintergrundbild auf eine ausreichend große Größe, damit das Hintergrundbild vollständig abgedeckt wird den Hintergrundbereich. Einige Teile des Hintergrundbilds werden möglicherweise nicht im Hintergrundpositionierungsbereich angezeigt.

min-height: 100vh – die Höhe des Fensters. window.innerWidth/ window.innerHeight Größe.

Empfohlenes Lernen: „

CSS-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo stellen Sie die Bilddehnung ohne Wiederholung in CSS ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!