logo标签列表

如何移除默认的Bootstrap 3走马灯控制背景渐变？

csstwitter-bootstrapcarouselgradient
46

我相信这就是我需要修改的代码，但出于某些原因，我无法让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 声明吗？ - Pavlo
我这样做了，结果得到了一个纯蓝色的背景。 - VSHoward
1
其实，我想我终于搞懂了！code filter:progid:DXImageTransform.Microsoft.gradient(enabled='false') - VSHoward
2
不错！现在你可以将你的解决方案发布为答案并接受它。 - ringstaff
你到底得到了什么？请帮我移除它，谢谢！ - I Wanna Know
6个回答
117
.carousel-control.left, .carousel-control.right {
    background-image: none
}
2
你可能需要根据你的CSS结构添加!important。 - psorensen
我的代码使用自定义样式，其选择器为"a.myStyle.carousel-control"。 - Peter L
如果想要避免选择时的虚线边界，请添加outline: none。 .carousel-control.left, .carousel-control.right {     background-image: none;     outline: none; } - equiman
19

IE浏览器的滤镜效果很奇怪，在尝试修复IE9中的问题时，以下方法可行（适用于所有IE版本）：

.carousel-control.left, .carousel-control.right{ 
    background: none !important;
    filter: none !important;
    progid:none !important;
}
11
.carousel-control { background: none !important; filter: none !important; progid:none !important; } 可以翻译为： .carousel-control {背景：无！重要; 过滤器：无！重要;程序标识：无！重要;}。 - Hunt Burdick
1
这是正确的答案，因为它包括IE9的重置。 - piotr_cz
12

我注意到，如果不加入以下内容，点击按钮时也会出现这个令人讨厌的虚线框：

总的来说，这使得按钮变得美观：

.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;
}
5

有一个专门为重置IE渐变的mixin（Bootstrap 3）。

SASS:

.carousel-control {
  &.left, &.right {
    background-image: none;
    @include reset-filter();
  }
}
这似乎是最强大的答案，特别是如果您已经在使用bootstrap-sass。 - elsurudo
SASS用户的最佳答案！ - bart
1
.carousel-control {
        opacity:100;
    }

对我有用。希望能帮助到其他人。

0

如果你想要一个没有模糊的幻灯片，请尝试使用slick、owl carousal slider。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接