Heim >Web-Frontend >Bootstrap-Tutorial >So legen Sie ein Hintergrundbild im Bootstrap fest

So legen Sie ein Hintergrundbild im Bootstrap fest

藏色散人
藏色散人Original
2019-07-15 11:19:3922099Durchsuche

So legen Sie ein Hintergrundbild im Bootstrap fest

So stellen Sie das Hintergrundbild so ein, dass es sich im Bootstrap automatisch anpasst

Browser: Chrome

Verwenden Sie CSS: Bootstrap (dies kann sich auf unsere CSS-Einstellungen auswirken, daher werde ich es erwähnen)

Beim Festlegen von Hintergrundbildern stelle ich oft fest, dass sich das Hintergrundbild nicht automatisch an den Bildschirm anpassen kann, wie ich es möchte. Ich auch Nachdem ich viele Methoden ausprobiert habe, habe ich eine Einstellung gefunden, die für meine Situation funktioniert.

Der Code lautet wie folgt:

body {
  background-image: url("../images/backgroundImg2.jpg");
  background-position: center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
}

Auf diese Weise kann das Hintergrundbild des Körpers erfolgreich so eingestellt werden, dass es sich automatisch an den Bildschirm anpasst.

Ich habe jedoch nicht bestätigt, ob andere Browser kompatibel sind. Es ist derzeit auf Chrome verfügbar.

Zugehörige Attribute:

Das Attribut „Hintergrundbild“ legt das Hintergrundbild für das Element fest. Der Hintergrund eines

-Elements nimmt die gesamte Größe des Elements ein, einschließlich Polsterung und Rändern, jedoch keine Ränder.

Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Elements platziert und wiederholt sich horizontal und vertikal.

Tipp: Bitte legen Sie eine verfügbare Hintergrundfarbe fest, damit die Seite gute visuelle Effekte hat, auch wenn das Hintergrundbild nicht verfügbar ist.

Verwandte Empfehlungen: „Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie ein Hintergrundbild im Bootstrap fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn