這款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;
}
因爲IE不支持'filter'? http://caniuse.com/#feat=css-filters – j08691