html - 如何在 iframe 上创建模糊？

Question

body {
  margin: 0;
}

iframe {
  display: block;
  background: #000;
  border: none;
  height: 100vh;
  width: 100vw;
}

.blur {
  width: 100%;
  height: 100%;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blur"> </div>
<iframe class="blur" src="x"></iframe>

我正在寻找一种模糊 iframe 的方法。

我一直在谷歌上搜索它，我找不到任何东西。我尝试这样做的方法是创建一个 div 并将其模糊并将其放在顶部。但是，它们并没有相互重叠。

提前致谢

标签： htmlcss