css - multiple - ¿Cómo se eliminan los gradientes de fondo predeterminados del control de carrusel de Bootstrap 3?

carousel jquery

Question

Estoy bastante seguro de que este es el código que necesito modificar, pero por alguna razón no puedo hacer que los degradados desaparezcan en IE. ¡Quiero que se hayan ido completamente!

.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)
}

Answer 1

Hay mixin especializado para restablecer el gradiente IE (Bootstrap 3).

HABLAR CON DESCARO A:

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

Answer 2

IE tiene un filtro raro y esto funcionó cuando intentaba arreglarlo en IE9 (debería funcionar para todos):

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

Answer 3

Noté que esto también tendrá este cuadro de líneas de puntos molestos cuando lo haces clic a menos que añadas esto:

Con todo, esto hace que los botones sean hermosos:

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

Answer 4

.carousel-control {
        opacity:100;
    }

trabajó para mi. Espero que esto pueda ayudar a alguién.

Answer 5

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