Comment créer un arrière-plan bootstrap pleine largeur avec des superpositions transparentes et plusieurs colonnes ?

Arrière-plan Bootstrap pleine largeur avec superpositions de couleurs transparentes et plusieurs colonnes

Dans Bootstrap 3, obtenir un arrière-plan pleine largeur avec des superpositions de couleurs transparentes tout en conservant plusieurs colonnes peut être un défi. Pour y parvenir, vous pouvez exploiter les techniques décrites dans les demandes précédentes et les étendre pour incorporer des éléments de colonne.

La démonstration de code fournie dans l'exemple Codepen présente efficacement l'implémentation. Voici l'extrait de code pertinent pour référence :

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

Cette approche implique la création d'un élément supplémentaire avec une classe « extra » qui sert de conteneur pour l'ensemble de la mise en page. Dans cet élément « supplémentaire », vous aurez le conteneur de contenu principal avec une classe « conteneur ». Pour positionner les superpositions colorées au-dessus des colonnes, vous pouvez utiliser le pseudo-élément ':before' sur les classes de colonnes 'gauche' et 'droite', ce qui vous permet d'ajouter du contenu avant le contenu réel de l'élément. En définissant la largeur et la hauteur de ces pseudo-éléments à 100vw et 100%, vous vous assurez qu'ils couvrent toute la largeur et la hauteur des colonnes. Enfin, vous pouvez spécifier les couleurs transparentes à l'aide de la fonction 'rgba()', où la dernière valeur représente le niveau de transparence (0 pour transparent, 1 pour totalement opaque).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!