如何在BootStrap .carousel-control中使用背景图像

Question

你能告诉我如何更新.carousel-controlCSS以使用像这个箭头图像的背景图像吗？
我尝试通过添加更新此CSS代码

position:absolute;
display:none;
top:50%;
margin-top:-28px;
z-index:60;
height: 50px;
width: 51px;
background-image: url(http://www.promap.ca/img/arrows.png);
/*max-height:20%;
max-width:12%;
background-size:200% 200%;*/

要跟随代码,但它没有通过!

.carousel-control {
    position: absolute;
    top: 40%;
    left: 15px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 60px;
    font-weight: 100;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    background: #222222;
    border: 3px solid #ffffff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
     border-radius: 23px;
     opacity: 0.5;
     filter: alpha(opacity=50);
 }

.carousel-control.right {
    right: 15px;
    left: auto;
}

.carousel-control:hover,
.carousel-control:focus {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

Answer 1

Bootstrap Carousel Orientation

我也不能肯定在那里你想要这个形象去.放到哪里非常重要

看看这个Bootply,看看每个css背景颜色的应用位置 - 这就是你的图像所在的位置:

.carousel .container {
  background-color: red;
}

.carousel-control {
  background-color: green;
}

.carousel .item {
  background-color: black;
}

.carousel-caption h1,
.carousel-caption .lead {
    background-color: yellow;
}

自定义轮播箭头

我猜你正在尝试专门定制箭头,因为这是你的图像文件的名称.

默认情况下,箭头图像只是一个<或一个>字符,通过使用字形来指定带有前选择器的锚标记的内容,如下面的文件中所示:bootstrap.css

.carousel-control .icon-prev:before { content: '\2039'; }
.carousel-control .icon-next:before { content: '\203a'; }

您可以通过在箭头锚标记的innerHtml中指定左右箭头来添加您想要的任何内容

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">...</div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <img src="http://i.imgur.com/QPWSDdP.png"/>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <img class="flipped" src="http://i.imgur.com/QPWSDdP.png" />
  </a>
</div>

如果您有下一个箭头的不同图像,您可以使用它,或者您可以将css类应用于它并使用以下css水平翻转它:

.flipped {
    -webkit-transform: scale(-1, 1);
     -khtml-transform: scale(-1, 1);
       -moz-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
         -o-transform: scale(-1, 1);
            transform: scale(-1, 1);
}

此外,添加一些CSS,以便轮播图像默认值不适用于您的箭头:

#myCarousel a img {
    width:  20px !important;
    height: 40px !important;
}

在jsFiddle演示