Question

链接到网站测试页面：

我想要一个没有背景的旋转木马。所以图像和指标只是按原样显示。

试过这个：

.carousel{
     background:none;
     background-color: none; 
}

哪个没有什么区别，我还尝试添加一个占位符作为背景，看看它做了什么：

.carousel{
     background: url(http://placehold.it/620x420/);

}

这增加了占位符背景，但在旋转木马的阴影后面。我已在此处上传了一张图片：

希望有人知道我做错了什么，提前谢谢。

编辑：添加了旋转木马的HTML代码：

                                            <!-- Image Gallery Start--> 
                                        <br/><br/>

                                        <div id="Carousel" class="carousel slide" data-ride="carousel" style="max-width: 400px; margin: 0 auto">
                                            <!-- Indicators -->
                                            <ol class="carousel-indicators">
                                                 <li data-target="#suniceCarousel" data-slide-to="0" class="active"></li>
                                                 <li data-target="#suniceCarousel" data-slide-to="1"></li>
                                                 <li data-target="#suniceCarousel" data-slide-to="2"></li>
                                                 <li data-target="#suniceCarousel" data-slide-to="3"></li>
                                            </ol>

                                                <!-- Wrapper for slides -->
                                                <div class="carousel-inner" role="listbox">

                                                    <div class="item active">
                                                        <img class="img-responsive center-block" src="/images/sunice/sunice1.png" width="350" alt="Chania">
                                                    </div>

                                                    <div class="item">
                                                        <img class="img-responsive center-block" src="/images/sunice/sunice2.png" width="350" alt="Chania">
                                                    </div>

                                                    <div class="item">
                                                      <img class="img-responsive center-block" src="/images/sunice/sunice1.png" width="350" alt="Chania">
                                                    </div>

                                                    <div class="item">
                                                      <img class="img-responsive center-block" src="/images/sunice/sunice2.png" width="350" alt="Chania">
                                                    </div>

                                                </div>
                                                  <!-- Left and right controls -->
                                                  <a class="left carousel-control" href="#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="#Carousel" role="button" data-slide="next">
                                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                                    <span class="sr-only">Next</span>
                                                  </a>                                                

                                        </div>
                                    </br></br>
                                    <!-- Image gallery end-->

Answer 1

试一下

.carousel-inner .active{
     background:none !important;
}

Answer 2

如果我了解你只想删除V形纹的背景渐变？

#Carousel .carousel-control.left,
#Carousel .carousel-control.right {
  background-image: none;
}

这应该是你所需要的。以下是一个示例

＆＃13;

#Carousel .carousel-control.left,
#Carousel .carousel-control.right {
  background-image: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Image Gallery Start-->
<br/>
<br/>

<div id="Carousel" class="carousel slide" data-ride="carousel" style="max-width: 400px; margin: 0 auto">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#suniceCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#suniceCarousel" data-slide-to="1"></li>
    <li data-target="#suniceCarousel" data-slide-to="2"></li>
    <li data-target="#suniceCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <div class="item active">
      <img class="img-responsive center-block" src="http://www.newventureactive.co.uk/images/sunice/sunice1.png" width="350" alt="Chania">
    </div>

    <div class="item">
      <img class="img-responsive center-block" src="http://www.newventureactive.co.uk/images/sunice/sunice2.png" width="350" alt="Chania">
    </div>

    <div class="item">
      <img class="img-responsive center-block" src="http://www.newventureactive.co.uk/images/sunice/sunice1.png" width="350" alt="Chania">
    </div>

    <div class="item">
      <img class="img-responsive center-block" src="http://www.newventureactive.co.uk/images/sunice/sunice2.png" width="350" alt="Chania">
    </div>

  </div>
  <!-- Left and right controls -->
  <a class="left carousel-control" href="#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="#Carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>
</br>
</br>
<!-- Image gallery end-->

＆＃13;

Answer 3

我已经检查了在线示例，轮播将类active添加到当前活动项目。在style.css中，active类具有以下样式：

.active{
    background: url("images/active-bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    color: #fff !important;
}

您只需删除background属性，即可为每个轮播项目提供透明背景。

Answer 4

仅此方法有效：

<a class="left carousel-control" href="#myCarousel" data-slide="prev" style="background-image:none">
<a class="right carousel-control" href="#myCarousel" data-slide="next" style="background-image:none">

没有其他东西对我有用。

无法删除轮播的阴影背景 - CSS

4 个答案: