透明なオーバーレイと複数の列を使用して全幅のブートストラップ背景を作成する方法

透明な色のオーバーレイと複数の列を備えた全幅のブートストラップ背景

ブートストラップ 3 では、透明な色のオーバーレイを備えた全幅の背景を実現します一方、複数の列を維持するのは困難な場合があります。これに対処するには、以前の問い合わせで概説したテクニックを活用し、それを拡張して列要素を組み込むことができます。

Codepen の例で提供されているコードのデモは、実装を効果的に示しています。参考のため、関連するコード スニペットを次に示します。

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

このアプローチには、レイアウト全体のコンテナとして機能する「extra」クラスを持つ追加要素の作成が含まれます。この「追加」要素内には、「コンテナ」クラスを持つメイン コンテンツ コンテナがあります。色付きオーバーレイを列の上に配置するには、「left」列クラスと「right」列クラスの「:before」疑似要素を利用できます。これにより、要素の実際のコンテンツの前にコンテンツを追加できます。これらの疑似要素の幅と高さを 100vw および 100% に設定すると、列の幅と高さ全体が確実にカバーされます。最後に、「rgba()」関数を使用して透明色を指定できます。最後の値は透明度レベルを表します (透明の場合は 0、完全な不透明の場合は 1)。

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