Saya membuat situs web bootstrap, saya memerlukan overlay tetap di sebelah kiri tempat teks korsel harus meluncur.

Saat ini keterangan tetap berada di bawah bagian overlay. Bagaimana memperbaikinya.

<div class="container-fluid">
<div class="row fullscreen-carousel">
<div id="main-carousel" class="carousel slide">
  <div class="banner-seperator">
  </div>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <!-- First slide -->
    <div class="item active">
      <img src="http://placehold.it/1920x920" alt="">
      <div class="carousel-caption">
        <h1 data-animation="animated fadeInDown">
          This is the caption for slide 1
        </h1>
        <p data-animation="animated fadeInUp">
          This is the caption for slide 1
        </p>
        <button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
      </div>
    </div><!-- /.item -->

    <!-- Second slide -->
    <div class="item">
      <img src="http://placehold.it/1920x920" alt="">
      <div class="carousel-caption">
        <h1 data-animation="animated fadeInDown">
          This is the caption for slide 1
        </h1>
        <p data-animation="animated fadeInUp">
          This is the caption for slide 1
        </p>
        <button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
      </div>
    </div><!-- /.item -->

    <!-- Third slide -->
    <div class="item">
      <img src="http://placehold.it/1920x920" alt="">
      <div class="carousel-caption">
        <h1 data-animation="animated fadeInDown">
          This is the caption for slide 1
        </h1>
        <p data-animation="animated fadeInUp">
          This is the caption for slide 1
        </p>
        <button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
      </div>
    </div><!-- /.item -->

  </div><!-- /.carousel-inner -->

  <!-- Controls -->
  <a class="left carousel-control" href="#main-carousel"
  role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#main-carousel"
  role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
  </a>

</div><!-- /.carousel -->

SCSS

.carousel .carousel-caption {
bottom: auto;
text-align: left;
top: 30%;
transform: translateY(-30%);
z-index: 12;
h1 {
  font-size: 6em;
  margin-bottom: 0;
  animation-delay: 0.5s;
}
p {
  font-size: 1.5em;
  animation-delay: 1s;
}
button {
  float: left;
  animation-delay: 1s;
}
}

.item {
   -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.banner-seperator {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 27%;
  background-color: $main-banner-bg-color;
  z-index: 1;
}

Contoh langsung di sini: http://www.bootply.com/f447QYfkHc

Saya mencoba menempatkan overlay sebelum setiap .item Itu membuat overlay meluncur dengan slider juga. Saya perlu overlay diperbaiki ke kiri.

0
Sathish Manohar 7 Desember 2016, 15:22

2 jawaban

Jawaban Terbaik

Ok masalahnya kamu coba bawa caption yang ada di dalam item yang ada di bawah banner. Saya tidak berpikir ada kemungkinan untuk memperbaikinya dengan css.

Satu-satunya kemungkinan yang saya lihat adalah mendapatkan keterangan di luar elemen .item.

Sebagai bukti teori saya coba tambahkan position: relative; indeks-z: 12; dari .item. Anda akan melihat bahwa item dengan keterangan berada di atas (tetapi spanduk kemudian dihamparkan).

1
Andreas Rau 7 Desember 2016, 13:03

Anda lupa memposisikan caption.

Saya dapat melihat 3 properti css (atas, bawah, indeks-z) yang hanya berfungsi untuk elemen yang diposisikan.

Jadi tentukan posisi (ansolute atau relative) dan itu akan berfungsi!

0
Andreas Rau 7 Desember 2016, 12:30