Question

此Blur在Chrome中运行良好，但不适用于Edge或IE。这似乎是一个微软的bug。有人可以在我的代码中发现错误，以便我能够获得预期的行为吗？

谢谢！

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

Answer 1

CSS3过滤器在IE 10中不起作用 - 它们不受支持。某些旧版本的Firefox也不支持过滤器。您可以在此链接上查看支持： http://caniuse.com/#feat=css-filters

为什么这个CSS Blur在IE中不起作用，但在Chrome中有效？

1 个答案: