web-dev-qa-db-ja.com

bootstrapカルーセルでグリフィコンから影を取り除く方法

私のサイトにはbootstrapカルーセルがあります。それに付属する右矢印と左矢印のグリフィコンは、灰色の四角い網掛けのボックスで囲まれています。誰かが削除する方法を教えてくれないかと思っていました。シェーディングなので矢印だけですが、どういうわけかブートストラップのcssを上書きする必要がありますか？

twitter-bootstrapglyphicons
8
user4583569

私は以前にこの問題を抱えていました。これをbootstrapは、背景画像または/およびフィルターとして影を提供します。

.carousel-control.left, .carousel-control.right {
   background-image:none !important;
   filter:none !important;
}

前に提案したように、不透明度を1に変更します

20
jsg

.carouselコントロールに<style="background-image: none;">を追加するだけです

1
Ashish Jha

これを追加して、bootstrap.cssが上書きされていることを確認してください

.carousel-control {
    background-image:none !important;
    filter:none !important;
}
0
Yousef Altaf

あなたが言及しているのは、.carousel-controlアイテムだと思います。

私が作成したこのBootplyは、要素の不透明度である調整が必要なものを示しているはずです。

http://www.bootply.com/TvRdyXhIxo

不透明度を通常の状態に設定し、ホバー状態を任意の状態に設定します。

.carousel-control {
  opacity: 0.5;
}

.carousel-control:hover {
  opacity: 0.5;
}
0
Billy Moat