底部邊框只在Internet Explorer 7中使用具有漸變效果的背景圖像

我正試圖設計一個底部有線性漸變的DIV標籤，以使其具有淡入淡出效果。底部邊框只在Internet Explorer 7中使用具有漸變效果的背景圖像

我已經能夠使用下面的CSS在Chrome，Internet Explorer 10，Firefox等上執行此操作。

我對Internet Explorer 7使用了過濾器和progId，但它給出了整個div的背景，而不僅僅是底部或頂部。

我認爲這是因爲，不幸的是，Internet Explorer 7不讀取CSS background-size屬性。

有沒有人知道一種方法獲取線位置在div標籤的底部？

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div 
{ 
padding:20px 40px; 
overflow: hidden; 
background-image: linear-gradient(90deg, #000, #FFF, #000), linear-gradient(90deg, #000, #FFF, #000); 
background-image: -webkit-linear-gradient(90deg, #000, #FFF, #000), -webkit-linear-gradient(90deg, #000, #FFF, #000); 
background-image: -webkit-gradient(linear, 90deg, #000, #FFF, #000), -webkit-gradient(90deg, #000, #FFF, #000); 
background-image: -moz-linear-gradient(90deg, #000, #FFF, #000), -moz-linear-gradient(90deg, #000, #FFF, #000); 
background-image: -o-linear-gradient(90deg, #000, #FFF, #000), -o-linear-gradient(90deg, #000, #FFF, #000); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff',GradientType=1); 
background-size: 100% 2px; 
background-position: 0 100%;  
background-repeat: no-repeat; 
width: 100%; 
background-color: #111111; 
color:#ffffff; 
} 

</style> 
</head> 
<body bgcolor="#111111;"> 

<div>Example of what it looks like in Chrome, FF etc.</div> 

</body> 
</html>

來源

2013-08-16 Damian Colton

您是否嘗試過'background-position：bottom;'？ – Joum

你可能已經看到了這個，但僅供參考，可能有幫助：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size – Joum

人們應該停止專門支持IE 7- – Itay

這不是一個IE7的bug，就像IE7沒有現代瀏覽器功能一樣。這並不讓人驚訝，因爲它有多大。

您使用的filter樣式是在IE7中進行漸變的常用方式，但它絕對是非標準的，不能期望以相同的方式工作。它們是最初不是爲Web設計的外部組件，通過activeX被嵌入到IE中。這不是很好。

你必須對如何處理這幾個選擇：

接受的是IE7真的不支持漸變，並給它一個簡單的背景作爲後備。
接受IE7可以使用filter漸變，但他們不是很好。
使用JavaScript填充，例如CSS3Pie，其繪製比filter風格更好的漸變效果。

我會專注於最後一個選項，因爲我懷疑這是您要使用的選項。 CSS3Pie侵入IE的CSS解析，以便它支持（接近）標準的CSS漸變（和其他功能）。

這個東西比filter風格更好，它使用IE的VML圖形語言來呈現這些漸變。這比filter靈活得多，並且允許你之後的複雜梯度。有一些限制，但一般來說，結果是很多好於使用filter您的漸變。

它還具有使用標準CSS語法的優點，這使得它更容易編寫和維護。

唯一的缺點是它是一個JavaScript庫，如果過度使用它，它確實有可能降低網站速度。我對此沒有任何問題，但關鍵是要儘量少用這個庫（以及一般的polyfill）;在它對您的網站產生真正影響的地方使用它們，並且在後退選項不夠好的情況下使用它們。

希望有所幫助。

來源

2013-08-16 08:44:37 Spudley

+1 ..我已經知道CSS3Pie，但沒有'噸回憶它...很好的解釋，但... – Joum

底部邊框只在Internet Explorer 7中使用具有漸變效果的背景圖像

回答

相關問題