Wie erstelle ich einen Bootstrap-Hintergrund in voller Breite mit transparenten Überlagerungen und mehreren Spalten?

Bootstrap-Hintergrund in voller Breite mit transparenten Farbüberlagerungen und mehreren Spalten

In Bootstrap 3 wird ein Hintergrund in voller Breite mit transparenten Farbüberlagerungen erreicht Dabei kann die Verwaltung mehrerer Spalten eine Herausforderung sein. Um dies zu bewältigen, können Sie die in früheren Anfragen beschriebenen Techniken nutzen und sie um die Einbeziehung von Spaltenelementen erweitern.

Die im Codepen-Beispiel bereitgestellte Codedemonstration zeigt die Implementierung effektiv. Hier ist der relevante Codeausschnitt als Referenz:

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

.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);
}

[class*="col"] {
  border: 2px solid grey;
  min-height: 120px;
  position: relative;
}

.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);
}

Bei diesem Ansatz wird ein zusätzliches Element mit der Klasse „extra“ erstellt, das als Container für das gesamte Layout dient. Innerhalb dieses „zusätzlichen“ Elements haben Sie den Hauptinhaltscontainer mit der Klasse „Container“. Um die farbigen Überlagerungen über den Spalten zu positionieren, können Sie das Pseudoelement „:before“ für die Spaltenklassen „left“ und „right“ verwenden, wodurch Sie Inhalte vor dem eigentlichen Inhalt des Elements hinzufügen können. Indem Sie die Breite und Höhe dieser Pseudoelemente auf 100 vw und 100 % festlegen, stellen Sie sicher, dass sie die gesamte Breite und Höhe der Spalten abdecken. Schließlich können Sie die transparenten Farben mit der Funktion „rgba()“ festlegen, wobei der letzte Wert den Transparenzgrad darstellt (0 für transparent, 1 für vollständig undurchsichtig).

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