4

This Arrows画像.carousel-controlのような背景画像を使用するように CSS を更新する方法を教えてください。 を追加して、この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 に答える