カルーセルの制御を変更する次と前のボタンv4

Question

カルーセルのスライダーv4の次の画像ボタンと前の画像ボタンを変更したいのですが、色が変わると不透明度が低くなります。なぜか分かりません。

<div id="mycarousel" class="carousel slide bg-inverse" data-ride="carousel"> 
       <ol class="carousel-indicators"> 
        <li data-target="#mycarousel" data-slide-to="0" class="active"></li> 
        <li data-target="#mycarousel" data-slide-to="1"></li> 
        <li data-target="#mycarousel" data-slide-to="2"></li> 
       </ol> 
       <div class="carousel-inner" role="listbox"> 
        <div class="carousel-item active"> <img class="d-block img-fluid ml-auto mr-auto" src="assets/images/banner0.png" alt="first slide"> 

         <div class="carousel-caption"> 
          <h3 class="animated fadeInDownBig">Network Security &</h3> 
          <h3 class="animated fadeInDownBig">Modern Data Center</h3> 
          <h3 class="animated fadeInUp">Networking Solutions</h3> 

         </div> 
        </div> 
        <div class="carousel-item"> <img class="d-block img-fluid ml-auto mr-auto" src="assets/images/banner.png" alt="second slide"> 
         <div class="carousel-caption"> 
          <h3 class="animated fadeInDownBig">Network Security &</h3> 
          <h3 class="animated fadeInDownBig">Modern Data Center</h3> 
          <h3 class="animated fadeInUp">Networking Solutions</h3> 
         </div> 
        </div> 
        <div class="carousel-item"> <img class="d-block img-fluid ml-auto mr-auto" src="assets/images/banner3.png" alt="third slide"> 
         <div class="carousel-caption"> 
          <h3 class="animated fadeInDownBig">Network Security &</h3> 
          <h3 class="animated fadeInDownBig">Modern Data Center</h3> 
          <h3 class="animated fadeInUp">Networking Solutions</h3> 
         </div> 
        </div> 
       </div> 


       <div class="container"> 
        <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> 
        <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> 
       </div> 
      </div> 

Answer 1

ブートストラップv4では、次のおよび以前のカルーセル制御アイコンがSVGイメージになりました。したがって、CSSスタイルの属性を直接使用してアイコンの色を変更することはできません（まだbackground-colorを変更できます）。ここでアイコンの色を変更するための回避策です。

あなたが前と次のアイコンをブラウザのインス​​ペクタを使用している場合は、以下のようにSVGコードでfill属性をオーバーライドし、アイコンの色を変更するにはbootstrap.min.css

.carousel-control-next-icon { 
    background-image: url(....); 
} 
.carousel-control-prev-icon { 
    background-image: url(....); 
} 

から来る次のスタイルが表示されます。 （デフォルト色：%23fff、新色：%343A40）

.carousel-control-next-icon { 
    background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%343A40' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important; 
} 
.carousel-control-prev-icon { 
    background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%343A40' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important; 
} 

今すぐあなたのカルーセルコントロールアイコンが新しい色で表示されなければなりません。