如何删除默认的 Bootstrap 3 轮播控件背景渐变？答案

【问题标题】：How do you remove the default Bootstrap 3 carousel control background gradients?如何删除默认的 Bootstrap 3 轮播控件背景渐变？
【发布时间】：2014-01-11 20:15:59
【问题描述】：

我很确定这是我需要修改的代码，但由于某种原因，我无法让渐变在 IE 中消失。我希望他们彻底消失！

.carousel-control {
text-shadow: none;
opacity: 1;
filter: alpha(opacity=100)
}
.carousel-control.left {
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.0001)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0,0,0,0.5) 0), color-stop(rgba(0,0,0,0.0001) 100%));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
background-repeat: repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)
}
.carousel-control.right {
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0,0,0,0.0001)), to(rgba(0,0,0,0.5)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0,0,0,0.0001) 0), color-stop(rgba(0,0,0,0.5) 100%));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
background-repeat: repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)
}
.carousel-control:hover, .carousel-control:focus {
opacity: 1;
filter: alpha(opacity=100)
}

【问题讨论】：

您是否尝试删除 background-image 和 filter 声明？
我做了，我得到了蓝色背景。
其实我想我终于明白了！ code filter:progid:DXImageTransform.Microsoft.gradient(enabled='false')
不错！现在您可以发布您的解决方案作为答案并接受它。
你到底得到了什么？请我仍然无法删除它。谢谢！

标签： css twitter-bootstrap carousel gradient

【解决方案1】：

.carousel-control.left, .carousel-control.right {
    background-image: none
}

【讨论】：

您可能需要添加 !important，具体取决于您的 css 结构
我使用了一种自定义样式，该样式具有选择器“a.myStyle.carousel-control”。
如果想避免选择虚线边框，添加轮廓：无。 .carousel-control.left, .carousel-control.right { background-image: none; outline: none; }

【解决方案2】：

IE 有一个奇怪的过滤器，这在尝试在 IE9 中修复它时有效（应该适用于所有人）：

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

【讨论】：

.carousel-control { background: none !important; filter: none !important; progid:none !important; }
这是正确答案，因为它包括 IE9 的重置

【解决方案3】：

我注意到当你点击它时也会有这个烦人的虚线框，除非你添加这个：

总而言之，这让按钮很漂亮：

.carousel-control.left, .carousel-control.right {
  background: none !important;
  filter: progid: none !important;
  outline: 0;
 }
.carousel .carousel-control {
  visibility: hidden;
}
.carousel:hover .carousel-control {
  visibility: visible;
}

【讨论】：

【解决方案4】：

有专门的 mixin 用于重置 IE 渐变（Bootstrap 3）。

SASS：

.carousel-control {
  &.left, &.right {
    background-image: none;
    @include reset-filter();
  }
}

【讨论】：

这似乎是最可靠的答案，尤其是如果您已经在使用 bootstrap-sass
SASS 用户的最佳答案！

【解决方案5】：

.carousel-control {
        opacity:100;
    }

为我工作。希望这可以帮助某人。

【讨论】：