javascript - 如何对 Blogger 中的背景图片应用模糊效果？

Question

我一直在尝试为我的帖子添加模糊效果，但唯一模糊的是主要帖子内容(图片:http://i.gyazo.com/9d94d2be5dc3f3ada982564aa212336e.jpg)。知道如何定位背景图像而不是内容吗？

我现在使用的代码是:

<script type="text/javascript">
var image = document.querySelector('.post-body img').src;
var target = document.body;
target.style.backgroundImage = "url(" + image + ")";
target.style.backgroundSize = "cover";
document.body.style["background-attachment"] = "fixed";
</script>

我有一种奇怪的感觉，您需要将实际的背景图像制作成独立的元素，但我不知道该怎么做。

此外，我是否可以添加 Blur.js进入博客还是仅适用于 Wordpress？如果是，我想知道怎么做？

提前致谢。

Answer 1

我在 this 上工作并看到了这个问题。所以这里有一个建议。

<script type="text/javascript">

    function showBackground() {
        document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundImage = "url('http://backgroundImage.jpg')";
        document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundPosition = "center center";
        document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundRepeat = "no-repeat";
        document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundAttachment = "fixed";
        document.getElementsByClassName('body-fauxcolumn-outer')[0].style.webkitFilter = "blur(5px)";
    }

    window.onload = showBackground();


</script>

解释

此时我使用简单模板，我注意到标准模板有一个名为body-fauxcolumn-outer 的类，用于设置背景颜色。

所以我调整了我的答案 here来回答这个问题。

我刚刚添加了以下内容来修复模糊，如下图所示。

document.getElementsByClassName('body-fauxcolumn-outer')[0].style.webkitFilter = "blur(15px)";