Comment créer un arrière-plan pleine largeur avec des superpositions de couleurs transparentes à l'aide de Bootstrap 3 ?

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

Créer une image d'arrière-plan pleine largeur avec des superpositions de couleurs transparentes à l'aide de Bootstrap 3 peut sembler intimidant , mais c'est possible avec une technique astucieuse.

Pour y parvenir, vous utiliserez une combinaison de positionnement absolu, de pseudo-éléments et de superpositions de couleurs.

Structure HTML :

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

Styles CSS :

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

Explication :

• Le L'élément .container est défini sur une largeur spécifique et centré avec des marges automatiques.
• Un pseudo-élément .extra:before est ajouté pour étendre la largeur du conteneur au-delà de la fenêtre d'affichage, créant l'illusion d'un arrière-plan pleine largeur. .
• Les éléments .col reçoivent une bordure solide pour la visualisation.
• Les pseudo-éléments au sein des .left et .right agissent sous forme de superpositions de couleurs transparentes, couvrant les colonnes respectives.

Cette technique vous permet d'obtenir sans effort l'effet d'arrière-plan et de superposition souhaité avec Bootstrap 3.

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!