CSS-Einstellung Div-Hintergrundbild-Implementierungscode

Das Hinzufügen einer Hintergrundbildsteuerung zu einer Komponente erfordert nur zwei Schritte:

<Ansicht
            Klassenname="Geschenke"
            Stil={{
              Hintergrund: `url(${baseUrl}starMove/exclusiveEntrance/card.png) keine Wiederholung`,
              Hintergrundgröße: '100% 100%',
            }}
          >
          <View classname="Geschenklisten"></View>
</Anzeigen>

Legen Sie Hintergrund und Hintergrundgröße fest.

Stil={

 Breite: 100 %;
 Höhe: 100%;
}

ps: So verwenden Sie eine CSS-Datei, um die Größe des Hintergrundbilds an die Größe des Div anzupassen

Durch Festlegen des Hintergrundbildattributs: background-size: cover; kann das Hintergrundbild an die Größe des Div anpassen.

background-size hat 3 Eigenschaften:

• auto: Wenn diese Eigenschaft verwendet wird, wird das Hintergrundbild ohne Skalierung in seiner Größe von 100 % angezeigt. Alles jenseits des Div wird ausgeblendet. Wenn das Bild zu klein ist, wird es automatisch gekachelt. Diese Eigenschaft wird häufig verwendet, um einen sich wiederholenden Hintergrund oder einen halbtransparenten Bildhintergrund zu erstellen.
• cover: Wenn dieses Attribut verwendet wird, wird das Bild so skaliert, dass es gerade das Div abdeckt und der verborgene Teil des Bildes minimal ist. Dieses Attribut wird häufig bei großen Bildhintergründen verwendet. Dies ist schwer zu verstehen und bedarf der praktischen Anwendung.
• enthalten: Wenn dieses Attribut verwendet wird, wird das Bild maximal skaliert und kann vollständig angezeigt werden. Da sich jedoch das Größenverhältnis des Bildes vom Größenverhältnis des Div unterscheidet, wird das Bild automatisch gekachelt, wenn das Bild das Div nicht abdecken kann.

Zusammenfassen

Dies ist das Ende dieses Artikels über den Implementierungscode zum Festlegen eines Div-Hintergrundbilds mit CSS. Weitere relevante CSS-Div-Hintergrundbildinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!