在ie8中沒有顯示線性漸變的背景圖像

我對元素使用了以下css。它僅與Internet Explorer 8打破在ie8中沒有顯示線性漸變的背景圖像

background-image: url(../images/icon-save.png); 
background-image: url(../images/icon-save.png), linear-gradient(bottom, #383838 0%, #666666 100%); 
background-image: url(../images/icon-save.png), -o-linear-gradient(bottom, #383838 0%, #666666 100%); 
background-image: url(../images/icon-save.png), -moz-linear-gradient(bottom, #383838 0%, #666666 100%); 
background-image: url(../images/icon-save.png), -webkit-linear-gradient(bottom, #383838 0%, #666666 100%); 
background-image: url(../images/icon-save.png), -ms-linear-gradient(bottom, #0c93C0, #FFF); 
/*IE7-*/ background-image: url(../images/icon-save.png), filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#383838', endColorStr='#666666', GradientType=0); 
/*IE8+*/ background-image: url(../images/icon-save.png), -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#383838', endColorStr='#666666', GradientType=0)"; 
background-image: url(../images/icon-save.png), -webkit-gradient(
linear, 
left bottom, 
left top, 
color-stop(0, #383838), 
color-stop(1, #666666) 
);

我希望，要麼-MS-過濾器或-MS-線性漸變的工作，但事實並非如此。我經歷了stackoverflow中的主題，但我沒有找到任何包含圖像。

來源

2013-07-16 Potney Switters

據我從我的webdeveloper天，我必須支持這些版本，記得'filter'和'-MS-filter'碰撞。嘗試省略ms-filter聲明並查看會發生什麼。 – Christoph

'-ms-linear-gradient'並不是真的必要;此前綴僅用於IE10的早期預發佈版本。 IE10的完整版本不需要前綴，早期版本的IE根本不支持標準的CSS漸變。 – Spudley

不幸的是，以上的工作。我最終做的是將以下內容添加到僅限IE8的css文件中。

background: url(../../../../modules/contrib/panels/panels_ipe/images/icon-close.png) no-repeat #666666;

我認爲這是一個最糟糕得多比方法2兩以上的建議，但因爲我coundn't使他們的工作，我會記住這作爲一個答案。我很願意聽取建議，如果有人認爲答案誤導:)

來源

2013-07-16 13:41:46

+1，因爲這當然是一個完美有效的解決方案。你不需要這個在IE8特有的CSS文件，因爲如果你指定它上面的其他'background'聲明，其他的瀏覽器會看到它但它之後而來的漸變背景覆蓋，所以它可以在同一文件沒有任何問題。但你有沒有嘗試過我建議的CSS3Pie？我很驚訝它不適合你。（您可能需要閱讀任何具體建議的文件上設置它，但它應該支持你正在試圖做什麼） – Spudley

我試了一下。我也問了一個問題，並通過了問題。但是，它似乎是一個非常好的工具，我將來會使用它，謝謝！ –

使用過濾器

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#383838", endColorstr="#666666",GradientType=0), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/icon-save.png");

來源

2013-07-16 10:48:16

你是怎麼得到這個工作的？我試過了，圖像從不加載。 – codenamezero

對我來說也是一樣，但'''DXImageTransform.Microsoft.AlphaImageLoader'''沒有漸變效果很好。您可以在父元素中添加漸變。 – yarl

沒有看到的jsfiddle或有鏈接到你的網站，我假設有些在這裏，但你嘗試多背景圖片是嗎？圖像+背景漸變？

IE8不支持多背景圖片，因爲它是一個CSS3規範。但是，這可能會訣竅：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#383838", endColorstr="#666666",GradientType=0), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/icon-save.png");

看到這個question。

來源

2013-07-16 10:49:06 Luke

過濾器應該用於背景圖像還是背景圖像？ –

我相信背景圖像。 – Luke

它看起來像你基本上試圖做的東西，IE8不支持。即使使用filter漸變（在最好的時候它們都很麻煩），old-IE無法處理這樣的多個背景。它只是一個CSS功能，以至於IE8以前的瀏覽器都支持它。

您可以用filter風格破解，使其工作，但它會是痛苦的。如果我是你，我會避免它。

幸運的是，還有另一種選擇：CSS3Pie。這是一個插入到樣式表中的小型JS庫，併爲IE的CSS支持添加了各種功能，包括CSS漸變和多個背景圖像。

這意味着你可以扔掉所有討厭的專有filter代碼，甚至對老版本的IE標準的CSS代碼替換它。

當然，它會爲您的網站增加一些腳本代碼，但它只會被舊的IE版本加載，所以它不會影響其他用戶，並且會使您的代碼更容易處理。

希望有所幫助。

來源

2013-07-16 10:59:44 Spudley

在ie8中沒有顯示線性漸變的背景圖像

回答

相關問題