web-dev-qa-db-fra.com

Comment pouvez-vous supprimer les 3 = gradients d'arrière-plan de contrôle carrousel Bootstrap?

Je suis à peu près sûr que c'est le code que je dois modifier, mais pour une raison quelconque, je ne parviens pas à faire disparaître les gradients dans IE. Je les veux complètement parti!

.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)
}
csstwitter-bootstrapcarouselgradient
44
VSHoward
.carousel-control.left, .carousel-control.right {
    background-image: none
}
114
George Armhold

IE a un filtre étrange et cela a fonctionné lorsque vous essayez de le réparer dans IE9 (devrait fonctionner pour tous):

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

Je remarque que cela aura également cette boîte en pointillé ennuyeux lorsque vous cliquez dessus, sauf si vous ajoutez ceci:

Dans l’ensemble, cela rend les boutons magnifiques:

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

Il existe des mixins spécialisés pour la réinitialisation IE dégradé (Bootstrap 3).

TOUPET:

.carousel-control {
  &.left, &.right {
    background-image: none;
    @include reset-filter();
  }
}
5
Rafal Gałka
.carousel-control {
        opacity:100;
    }

a travaillé pour moi. J'espère que cela peut aider quelqu'un.

1
Danie Du Preez