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

Question

您能否告诉我如何更新.carousel-control CSS以使用This Arrows图片等背景图片？
我尝试通过添加

来更新此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;
}

自定义轮播箭头

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

默认情况下，箭头图片只是<或>字符，方法是glyphs使用content选择器指定锚标记的before如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;
}

Demo in jsFiddle

Answer 2

如果您想使用背景图片并隐藏默认图标

.carousel-control .icon-prev:before { content: ''; }
.carousel-control .icon-next:before { content: ''; }

Answer 3

在您的代码中，链接断开，地址中没有引号。

background-image: url('http://www.promap.ca/img/arrows.png');

Answer 4

.carousel-control {

width: 54px;
height: 54px;
background: url(images/arrow_slide_sprite.png) -10px 0 no-repeat;
display: block;
position: absolute;
top: 50%;
margin-top: -27px;
z-index: 10;
cursor: pointer;

}