Question

标题可能有点模糊，道歉。在开始之前，我使用的是纯Bootstrap最新版本（https://getbootstrap.com/）。仅此而已。

基本上，我正在尝试为客户重新创建这个：

到目前为止，我有这个：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<section>
      <div class="col-md-8 offset-md-2">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt="">
              <div class="col-md-6 offset-md-6">
                <div class="carousel-caption d-none d-md-block">
                  <h2 class="p-2" style="text-align: left !important;">Title</h2>
                  <p style="text-align: left !important;">Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.</p>
                  <p style="text-align: right !important;">Read More...</p>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt="">
              <div class="col-md-6 offset-md-6">
                <div class="carousel-caption d-none d-md-block">
                  <h2 class="p-2" style="text-align: left !important;">Title</h2>
                  <p style="text-align: left !important;">Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.</p>
                  <p style="text-align: right !important;">Read More...</p>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt="">
              <div class="col-md-6 offset-md-6">
                <div class="carousel-caption d-none d-md-block">
                  <h2 class="p-2" style="text-align: left !important;">Title</h2>
                  <p style="text-align: left !important;">Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.</p>
                  <p style="text-align: right !important;">Read More...</p>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt="">
              <div class="col-md-6 offset-md-6">
                <div class="carousel-caption d-none d-md-block">
                  <h2 class="p-2" style="text-align: left !important;">Title</h2>
                  <p style="text-align: left !important;">Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.</p>
                  <p style="text-align: right !important;">Read More...</p>
                </div>
              </div>
            </div>
            <div class="col-md-6 offset-md-6">
              <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
              </ol>
              <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="align-text-bottom"><i class="fas fa-angle-left fa-3x"></i></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="align-text-bottom"><i class="fas fa-angle-right fa-3x"></i></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

＆＃13;

我遇到的问题是在放置在旋转木马控件/文本下面的同时获得覆盖图片以稍微遮盖图像......

是否有人能够就如何做到这一点给出一些指示......？

Answer 1

我有两种方法可以解决这个问题：

分别在每张幻灯片中创建着色叠加层。这很容易设置，并且很容易获得图像，叠加和标题文本的正确排序。缺点是着色的覆盖层会随着图像一起滑动，而旋转木马控件会留在原位。
创建叠加层作为轮播控件的包装器（适用于.carousel-indicators，.carousel-control-prev和.carousel-control-next）。对我而言，这似乎是一种更优雅的方式，但这也是更复杂的方式。原因是叠加层将在.carousel-caption所在的单独堆叠上下文中创建，因此保持图层的正确视觉排序并不明显。

以下是第二种方法的版本。
我建议检查CodePen上的实际示例，因为此处的代码段功能无法正常运行..

＆＃13;

/* This is important to make z-indexes work as expexted */
.carousel-item {
    -webkit-perspective: initial;
    perspective: initial;
}

/* This is to make the image offset */
.carousel-item img {
    padding: 1rem;
}

.carousel-panel,
.carousel-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
}

.carousel-panel {
    background-color: rgba(30,80,110,.334);
}
.carousel-overlay {
    /*
    Alternatively you could tint this, and 
    remove the coloring from `.carousel-panel`
    */
    /*background-color: rgba(30,80,110,.334);*/
}

.carousel-control-prev,
.carousel-control-next {
    align-items: bottom;
}

＆＃13;

<div class="container">
    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
        <div class="carousel-inner">
            <div class="carousel-test"></div>

            <div class="carousel-item active">
                <img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt="">
                <div class="carousel-overlay">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="py-2 text-left">Title</h2>
                        <p class="text-left">Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.</p>
                        <p class="text-right">Read More…</p>
                    </div>
                </div>
            </div>

            <div class="carousel-item">
                <img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt="">
                <div class="carousel-overlay">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="py-2 text-left">Title</h2>
                        <p class="text-left">Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.</p>
                        <p class="text-right">Read More…</p>
                    </div>
                </div>
            </div>

            <div class="carousel-item">
                <img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt="">
                <div class="carousel-overlay">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="py-2 text-left">Title</h2>
                        <p class="text-left">Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.</p>
                        <p class="text-right">Read More…</p>
                    </div>
                </div>
            </div>
            
            <div class="carousel-item">
                <img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt="">
                <div class="carousel-overlay">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="py-2 text-left">Title</h2>
                        <p class="text-left">Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.</p>
                        <p class="text-right">Read More…</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="carousel-panel">
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0" class="active"></li>
                <li data-target="#carousel" data-slide-to="1"></li>
                <li data-target="#carousel" data-slide-to="2"></li>
                <li data-target="#carousel" data-slide-to="3"></li>
            </ol>

            <a class="carousel-control-prev align-items-end" href="#carousel" role="button" data-slide="prev">
                <span class="mb-4"><i class="fa fa-angle-left fa-3x"></i></span>
                <span class="sr-only">Previous</span>
            </a>

            <a class="carousel-control-next align-items-end" href="#carousel" role="button" data-slide="next">
                <span class="mb-4"><i class="fa fa-angle-right fa-3x"></i></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

＆＃13;

Bootstrap轮播滑块内容容器 - 添加偏移背景

1 个答案: