当模糊内容时，<i-frame>模糊在内容上方，但<h1>模糊在原始标题文本下ASP.NET JavaScript

Question

var pageContent = document.getElementById("mainContent"),
        pagecopy = pageContent.cloneNode(true),
        blurryContent = document.getElementById("blurryscroll");
    blurryContent.appendChild(pagecopy);
    window.onscroll = function () {
        blurryContent.scrollTop = window.pageYOffset;

    }

使用此脚本，我设法使I-Frame模糊，但H1文本仍在模糊的H1上方。

为什么会这样？

PS。我正在遵循这种方法： https://codepen.io/anon/pen/moqZRB

在给定的示例中，H1文本是模糊的，在我的实现中，文本变得模糊了，但是原始的非模糊文本仍保留在“模糊”文本之上，而不是停留在“模糊”文本之后。