4

你能告诉我如何更新.carousel-controlCSS 以使用像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);
}
4

4 回答 4

7

引导轮播方向

我也不确定你想要这张图片去哪里。放在哪里很重要

查看此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;
}

截屏

自定义轮播箭头

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

默认情况下，箭头图像只是一个<或>字符，通过使用字形指定锚标记的内容，使用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;
}

jsFiddle 中的演示

于 2013-07-31T17:05:52.643 回答
1

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

.carousel-control .icon-prev:before { content: ''; }
.carousel-control .icon-next:before { content: ''; }
于 2016-02-15T09:19:14.613 回答
0

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

background-image: url('http://www.promap.ca/img/arrows.png');
于 2013-07-31T16:52:48.120 回答
0

.carousel-控制 {

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;

}

于 2018-06-08T17:31:41.610 回答