如何去除 bootstrap 轮播中字形的阴影

Question

我的网站上有一个 bootstrap 轮播。随附的右箭头和左箭头字形被方形灰色阴影框包围。我想知道是否有人可以告诉我如何去除阴影，所以我只有箭头。我是否必须以某种方式覆盖 bootstrap 的 css？

Answer 1

我想你指的是 .carousel-control 项目。

我创建的这个 Bootply 应该会向您展示您需要调整的内容，即元素的不透明度。

将不透明度设置为正常状态，将悬停状态设置为任何你想要的。

.carousel-control {
  opacity: 0.5;
}

.carousel-control:hover {
  opacity: 0.5;
}

Answer 2

我以前遇到过这个问题，只需将其添加为 bootstrap 提供阴影作为背景图像 or/and 作为滤镜

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

并且按照之前的建议，我会更改不透明度，但改为 1

Answer 3

只需在.carousel控件中添加<style="background-image: none;">

Answer 4

只需添加它并确保它覆盖 bootstrap.css

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

How to remove shadow from glyphicons in bootstrap carousel