Wie erstelle ich mit Bootstrap 3 einen Hintergrund in voller Breite mit transparenten Farbüberlagerungen?

Bootstrap-Hintergrund in voller Breite mit transparenten Farbüberlagerungen

Das Erstellen eines Hintergrundbilds in voller Breite mit transparenten Farbüberlagerungen mit Bootstrap 3 kann entmutigend erscheinen , aber mit einer cleveren Technik ist es möglich.

Um dies zu erreichen, verwenden Sie eine Kombination von absoluter Positionierung, Pseudoelementen und Farbüberlagerungen.

HTML-Struktur:

<div class="container extra">
  <div class="row">
    <div class="col-sm-4 left"></div>
    <div class="col-sm-8 right"></div>
  </div>
</div>

CSS-Stile:

.container {
  width: 50%;
  margin: auto;
  margin-top: 1em;
  position: relative;
  overflow: visible;
}
.extra:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translate(-50%, 0);
}
.left:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  right: 0;
  background: rgba(255, 0, 0, 0.5);
}
.right:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 255, 0.25);
}

Erklärung:

• Die Das .container-Element wird auf eine bestimmte Breite eingestellt und mit automatischen Rändern zentriert.
• Ein Pseudoelement .extra:before wird hinzugefügt, um die Breite des Containers über das Ansichtsfenster hinaus zu erweitern und so die Illusion eines Hintergrunds voller Breite zu erzeugen .
• Die .col-Elemente erhalten zur Visualisierung einen festen Rahmen.
• Pseudoelemente in .left und .right fungieren als transparente Farbüberlagerungen, die die jeweiligen Spalten abdecken.

Mit dieser Technik können Sie mit Bootstrap 3 mühelos den gewünschten Hintergrund- und Überlagerungseffekt erzielen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit Bootstrap 3 einen Hintergrund in voller Breite mit transparenten Farbüberlagerungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!