Compass background-image (linear-Gradient) funktioniert nicht auf IE

Question

Dieser Gradient mit SASS und Compass getan funktioniert nicht in einer beliebigen Version von Internet Explorer:

@include background-image(linear-gradient(left, rgba(241,236,236,0.95), rgba(241,236,236,0.9), rgba(241,236,236,0.85), rgba(241,236,236,0.8), rgba(241,236,236,0.75), rgba(241,236,236,0.4))); 

Es auf diese CSS übersetzt:

background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(241, 236, 236, 0.95)), color-stop(20%, rgba(241, 236, 236, 0.9)), color-stop(40%, rgba(241, 236, 236, 0.85)), color-stop(60%, rgba(241, 236, 236, 0.8)), color-stop(80%, rgba(241, 236, 236, 0.75)), color-stop(100%, rgba(241, 236, 236, 0.4))); 
    background-image: -webkit-linear-gradient(left, rgba(241, 236, 236, 0.95), rgba(241, 236, 236, 0.9), rgba(241, 236, 236, 0.85), rgba(241, 236, 236, 0.8), rgba(241, 236, 236, 0.75), rgba(241, 236, 236, 0.4)); 
    background-image: -moz-linear-gradient(left, rgba(241, 236, 236, 0.95), rgba(241, 236, 236, 0.9), rgba(241, 236, 236, 0.85), rgba(241, 236, 236, 0.8), rgba(241, 236, 236, 0.75), rgba(241, 236, 236, 0.4)); 
    background-image: -o-linear-gradient(left, rgba(241, 236, 236, 0.95), rgba(241, 236, 236, 0.9), rgba(241, 236, 236, 0.85), rgba(241, 236, 236, 0.8), rgba(241, 236, 236, 0.75), rgba(241, 236, 236, 0.4)); 
    background-image: linear-gradient(left, rgba(241, 236, 236, 0.95), rgba(241, 236, 236, 0.9), rgba(241, 236, 236, 0.85), rgba(241, 236, 236, 0.8), rgba(241, 236, 236, 0.75), rgba(241, 236, 236, 0.4)); 

Was tun Sie also, um dies mit IE zu lösen?

Ich testting es mit dem Internet Explorer 11. Ich brauche es von IE9 zu arbeiten +

Wie half unter ich jetzt die Antwort gefunden IE10 + abzudecken, das half mir:

background: -ms-linear-gradient(left, rgba(241,236,236,0.95), rgba(241,236,236,0.9), rgba(241,236,236,0.85), rgba(241,236,236,0.8), rgba(241,236,236,0.75), rgba(241,236,236,0.4)); /* IE10+ */ 

Nach Ich habe folgendes für IE9 versucht aber nicht funktioniert:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1ecec', endColorstr='#fffafa',GradientType=1); 

Was kann ich verwenden, um lästige IE9 zu decken?

Answer 1

Sie haben einen Filter für IE6-9 zu verwenden, die wie folgt aussieht:

filter: progid:DXImageTransform.Microsoft.gradient(...) 

und für IE10 +

-ms-linear-gradient 

Ich glaube IE6-9 Anschläge unterstützen nur 2 Farbe kann. Das Beste, was ich Ihnen geben kann, zu helfen, ist dies:

http://www.colorzilla.com/gradient-editor/

Erstaunlich Werkzeug für diese Sachen :)

Wenn Sie „Import“ Ihre CSS in das Werkzeug, das Sie bekommen:

/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZWNlYyIgc3RvcC1vcGFjaXR5PSIwLjk1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2YxZWNlYyIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMWVjZWMiIHN0b3Atb3BhY2l0eT0iMC40Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 
background: -moz-linear-gradient(top, rgba(241,236,236,0.95) 0%, rgba(241,236,236,0.75) 80%, rgba(241,236,236,0.4) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,236,236,0.95)), color-stop(80%,rgba(241,236,236,0.75)), color-stop(100%,rgba(241,236,236,0.4))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(241,236,236,0.95) 0%,rgba(241,236,236,0.75) 80%,rgba(241,236,236,0.4) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(241,236,236,0.95) 0%,rgba(241,236,236,0.75) 80%,rgba(241,236,236,0.4) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(241,236,236,0.95) 0%,rgba(241,236,236,0.75) 80%,rgba(241,236,236,0.4) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(241,236,236,0.95) 0%,rgba(241,236,236,0.75) 80%,rgba(241,236,236,0.4) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f1ecec', endColorstr='#66f1ecec',GradientType=0); /* IE6-8 */ 

Unterstützung für vollständige Multi-Stop-Gradienten mit IE9 (mit SVG). ein „Gefälle“ Klasse auf alle Ihre Elemente hinzufügen, die einen Gradienten haben, und fügen Sie den folgenden Überschreibung zu Ihrem HTML die IE9 Unterstützung abzuschließen:

<!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
<![endif]--> 

... oder sogar die SCSS Version

// needs latest Compass, add '@import "compass"' to your scss 
@include filter-gradient(#f2f1ecec, #66f1ecec, vertical); // IE6-8 
// IE9 SVG, needs conditional override of 'filter' to 'none' 
$experimental-support-for-svg: true; 
@include background-image(linear-gradient(top, rgba(241,236,236,0.95) 0%,rgba(241,236,236,0.75) 80%,rgba(241,236,236,0.4) 100%)); 

Heres ein Link zu Ihrer importierten CSS welche sollten Sie helfen: http://www.colorzilla.com/gradient-editor/#f1ecec+0,f1ecec+100&0.95+0,0.75+80,0.4+100;Custom

Answer 2

Diese arbeiten nicht in IE11

background-image: linear-gradient(top, #ff0000,#ffff00); 

Diese Arbeit und zeigen, wie dann Webkit-Version

background-image: linear-gradient(180deg, #ff0000,#ffff00); 

Die webkit auch die Unterstützung ... Grad-Modus, aber nicht funktionieren, wie der Forscher tut, dies entspricht in WebKit.

-webkit-linear-gradient(270deg, #ff0000,#ffff00); 

Hinweis: Chrome versteht die keine Webkit-Version als Explorer tut.