指南針背景圖片（線性漸變）不工作的IE

這梯度使用SASS和Compass做到不以任何版本的Internet Explorer的工作：指南針背景圖片（線性漸變）不工作的IE

@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)));

它翻譯成這個CSS：

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));

那麼你用IE來解決這個問題呢？

我與Internet Explorer 11試井它，我需要它從IE9工作+

如幫助之下，我發現現在的答案，包括IE10 +，幫我：

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+ */

後我嘗試了以下爲IE9，但沒有工作：

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

我可以用什麼來覆蓋惱人的IE9？

來源

2013-11-15 Daniel Ramirez-Escudero

請指定您正在測試的IE版本，以及您需要它工作的版本。在早期的IE版本中，CSS漸變需要不同的語法。 – Spudley

@Spudley我加了我在這個問題上使用的版本。我需要它從IE9 + –

你必須使用一個過濾器IE6-9，看起來像：

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

和IE10 +

-ms-linear-gradient

我相信IE6-9可能只支持2個色標。我可以給你的最好的事情太多幫助，是這樣的：

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

這個東西:)

驚人的工具如果「進口」你的CSS到工具中你會得到：

/* 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 */

支持IE9（使用SVG）的完整多梯度漸變。添加一個「梯度」類所有的元素有一個梯度，下面覆蓋添加到您的HTML完成IE9支持：

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

...甚至SCSS版本

// 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%));

繼承人給您導入CSS一個鏈接，應該可以幫助您：http://www.colorzilla.com/gradient-editor/#f1ecec+0,f1ecec+100&0.95+0,0.75+80,0.4+100;Custom

來源

2013-11-15 09:57:29 Lee

工作IE10 +不需要'-ms-'。沒有穩定版本的IE使用'-ms-'作爲漸變。每種說法都是錯誤的。 – BoltClock

誠然，沒有穩定的版本，它的'消費者預覽'版本確實。但是如果你打算支持所有其他的瀏覽器前綴，不會傷害到它，如果你打算支持所有其他的瀏覽器前綴，你可以再添加一個：P – Lee

當然，如果你想在你的樣式表中添加不必要的膨脹，把它推薦給其他人。正是那種使前綴如此脆弱的態度。 – BoltClock

這不工作在IE11

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

這項工作，並顯示像當年的WebKit版本

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

WebKit的還支持...度模式，但不工作作爲探險家呢，這是webkit的等價物。

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

注意：Chrome瞭解瀏覽器沒有webkit版本。

來源

2014-04-30 12:32:34 user3589298

指南針背景圖片（線性漸變）不工作的IE

回答

相關問題