Bagaimana untuk Mencipta Latar Belakang Lebar Penuh dengan Tindanan Warna Telus Menggunakan Bootstrap 3?

Latar Belakang Lebar Penuh Bootstrap dengan Tindanan Warna Telus

Mencipta imej latar belakang lebar penuh dengan tindanan warna telus menggunakan Bootstrap 3 mungkin kelihatan menakutkan , tetapi ia boleh dilakukan dengan teknik yang bijak.

Untuk mencapai ini, anda akan gunakan gabungan kedudukan mutlak, unsur pseudo dan tindanan warna.

Struktur 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 Gaya:

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

Penjelasan:

• Elemen .container ditetapkan pada lebar tertentu dan berpusat dengan jidar automatik.
• Elemen pseudo .extra:before ditambah untuk memanjangkan lebar bekas melepasi port pandangan, mencipta ilusi latar belakang lebar penuh.
• Elemen .col diberikan sempadan pepejal untuk visualisasi.
• Unsur pseudo dalam .kiri dan .kanan bertindak sebagai tindanan warna lutsinar, meliputi lajur masing-masing.

Teknik ini membolehkan anda dengan mudah mencapai latar belakang dan kesan tindanan yang diingini dengan Bootstrap 3.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Latar Belakang Lebar Penuh dengan Tindanan Warna Telus Menggunakan Bootstrap 3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!