Bootstrap 3 を使用して、透明なカラー オーバーレイを含む全幅の背景を作成する方法

透明なカラー オーバーレイを使用した全幅の背景のブートストラップ

Bootstrap 3 を使用して、透明なカラー オーバーレイを使用した全幅の背景画像を作成するのは、難しそうに思えるかもしれません。ですが、賢いテクニックを使えば可能です。

これを実現するには、絶対配置、疑似要素、カラー オーバーレイを組み合わせて使用​​します。

HTML 構造:

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

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

説明:

• .container 要素は特定の幅に設定され、自動マージンで中央に配置されます。
• 疑似要素 .extra:before が追加されて、コンテナの幅がビューポートを超えて拡張され、錯視が作成されます。
• .col 要素には、視覚化のために実線の境界線が付けられます。
• .left および .right 内の疑似要素は、透明なカラー オーバーレイとして機能し、それぞれの列をカバーします。

このテクニックを使用すると、Bootstrap 3 で目的の背景とオーバーレイ効果を簡単に実現できます。

以上がBootstrap 3 を使用して、透明なカラー オーバーレイを含む全幅の背景を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。