Question

我正在使用Bootstrap的Carousel，但有一些自定义箭头图像。它们仍然显示透明，我怎样才能让它们在完全不透明的情况下正常显示？一些代码：

HTML：

            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
              <span>
                <img src="../assets/imgs/arrows.png" />
              </span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
              <span>
                <img src="../assets/imgs/arrows.png" />
              </span>
            </a>

CSS：

.carousel-control .glyphicon,
.carousel-control .icon-prev,
.carousel-control .icon-next {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  font-family: serif;
  opacity: 0;
}

Answer 1

尝试将css中的opacity: 0;更改为opacity: 1;。

Answer 2

Bootstrap css有一些其他不透明的css类，尝试使用下面的css：

.carousel-control {
  filter: none;
  opacity: 1;
}
.carousel-control:hover,
.carousel-control:focus {
  filter: none;
  opacity: 1;
}

这对您有用吗？如果没有，请在http://jsfiddle.net/发布您的代码：）

如何使侧箭头图像不透明

2 个答案: