CSS 如何删除默认的 Bootstrap 3 轮播控件背景渐变？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20746461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you remove the default Bootstrap 3 carousel control background gradients?
提问by VSHoward
I'm pretty sure this is the code I need to modify, but for some reason I can't get the gradients to disappear in IE. I want them completely gone!
我很确定这是我需要修改的代码，但由于某种原因，我无法让渐变在 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)
}
回答by George Armhold
.carousel-control.left, .carousel-control.right {
background-image: none
}
回答by fullgeek
IE has a weird filter and this worked when trying to fix it in IE9 (should work for all):
IE 有一个奇怪的过滤器，这在尝试在 IE9 中修复它时有效（应该适用于所有人）：
.carousel-control.left, .carousel-control.right{
background: none !important;
filter: progid:none !important;>
}
回答by Tyhou
I notice that this will also have this annoying dotted line box when you click it unless you add this:
我注意到当你点击它时也会有这个烦人的虚线框，除非你添加这个：
All in all, this makes the buttons beautiful:
总而言之，这使按钮变得漂亮：
.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;
}
回答by Rafal Ga?ka
There is specialized mixin for resetting IE gradient (Bootstrap 3).
有专门的 mixin 用于重置 IE 梯度（Bootstrap 3）。
SASS:
萨斯：
.carousel-control {
&.left, &.right {
background-image: none;
@include reset-filter();
}
}
回答by Danie Du Preez
.carousel-control {
opacity:100;
}
worked for me. Hope this can help someone.
为我工作。希望这可以帮助某人。
