How do you remove the default Bootstrap 3 carousel control background gradients?

Question

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!

.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

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

Answer 2

IE has a weird filter and this worked when trying to fix it in IE9 (should work for all):

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