Question

我在使用bootstrap carousel-caption时遇到了麻烦。我想将不透明的轮播字幕添加到文本中。不透明度高度应该只是固定，就像它只覆盖文本区域一样。这是我当前的图片enter image description here

这是我的代码

                <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <style>
                      .carousel-caption {
                position: absolute;  }
                     </style>
              </ol>
              <div class="carousel-inner" role="listbox">
                <?php 
                                    $i = '0';
                                    foreach($slideImage as $v) {

                                        if($i == '1'){
                                         $test = 'active';
                                        }else {
                                         $test = '';
                                         }
                                ?>
                <div class="item <?php echo $test;?>"> <img src="<?php echo base_url("resource/flashimage/".$v->image); ?>" class="girl img-responsive" style="max-height:595px;" width="100%" alt="Fabrics World USA Slide Image" />
                  <div class="container">
                    <div class="carousel-caption">
                      <h3><?php echo $v->Header; ?></span></h3>
                      <p><?php echo $v->title; ?></p>
                      <a class="hvr-outline-out button2" href="<?php echo $v->url; ?>">Get it now</a> </div>
                  </div>
                </div>
                <?php  $i++; } ?>
              </div>
              <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
              <!-- The Modal -->
            </div>

那么css会是什么？提前谢谢

Boostrap轮播 - 标题背景不透明度位置

0 个答案: