模糊内容时,<i-frame>模糊位于内容上方,而<H1>模糊位于原始标题文本下方。NET JavaScript

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

    }

使用这个脚本,我成功地模糊了I帧,但H1文本仍然“覆盖”模糊的H1。

为什么会这样?

另外,我遵循了这个方法: https://codepen.io/anon/pen/moqZRB

在给定的示例中,H1文本是模糊的,在我的实现中,文本会变得模糊,但原始的非模糊文本仍然位于模糊文本之上,而不是停留在模糊文本的“后面”。