2016-06-14 212 views
0

這款Blur在Chrome中運行良好,但不支持Edge或IE。這看起來像是一個微軟的bug。有人可以找到我的代碼中有什麼問題,以便我可以得到預期的行爲嗎?爲什麼這個CSS模糊工作在IE中,但在Chrome中起作用?

謝謝!

https://jsfiddle.net/o3xpez4s/1/

<div id="MainBackground"> 
    <div id="TextBoxArea"> 
     <div id="BlurDiv"></div> 
     <div id="TextDiv">TEXT GOES HERE</div> 
    </div> 
</div> 

#MainBackground { 
    background-image: url(http://placekitten.com/700/300); 
    height: 250px; 
    width: 600px; 
    border-radius: 8px; 
} 
#TextBoxArea { 
    /* This should float towards the bottom of the MainBackground image */ 
    /* It should have a clean, non-blurred border */ 
    position: relative; 
    width: 450px; 
    top: 170px; 
    left: 60px; 
    border: 2px solid; 
    border-color: black; 
    border-radius: 25px; 
    overflow: hidden; 
    padding: 10px; 
    text-align: center; 
    height: 45px; 
} 
#BlurDiv { 
    /* This should contain the blurred background image */ 
    /* The image is moved a bit so that the eyeballs of the image are visible and blurred */ 
    position: absolute; 

    width: 100%; 
    height: 100%; 

    top: -100px; 
    left: -50px; 
    padding-left: 50%; 
    padding-top: 50%; 

    background-image: url(http://placekitten.com/800/300); 
    background-position-x: -134px; 
    background-position-y: -52px; 
    background-repeat: no-repeat; 

    -webkit-filter: blur(10px); 
    filter: blur(10px); 
} 
#TextDiv { 
    /* This just contains text. Text text should not be blurred. */ 
    position: relative; 
    color: white; 
    font-size: 40px; 
    font-weight: normal; 
} 
+1

因爲IE不支持'filter'? http://caniuse.com/#feat=css-filters – j08691

回答

1

CSS3過濾器不會在IE 10的工作 - 他們不被支持。一些舊版本的Firefox也不支持過濾器。 您可以在此鏈接檢查支持: http://caniuse.com/#feat=css-filters

+0

謝謝。我在其他地方讀過,但很困惑,因爲如果刪除「overflow:hidden」,我可以使Blur效果在Edge中工作,但會導致其他顯示問題。由於IE真的不能支持模糊,那麼我認爲我會通過用漸變替代我的模糊來解決我的問題。 – Jeremy

+0

是的漸變可以解決它。但特別模糊過濾器總是給IE中的問題,由於缺乏支持,我會建議更好地更新IE瀏覽器並檢查:) – Puneet

相關問題