如何在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)";

Answer 2

您可以尝试使用此CSS 3标记：

filter: blur(5px);

您可以在此处查看mdn文档：https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Answer 3

您可以在不使用任何JS或CSS的情况下在Blogger上执行此操作。

1. 将您的图片上传到Blogger帖子，就像您想将其放入文章中一样。

2. 复制图片的网址并将其粘贴到one object two objects css中，如下所示：

   body

3. 用body { background-image: url('YOUR IMAGE URL HERE'); }
替换网址的/s-1600/部分

注意：您可以通过摆弄/s1600-fcrop64=1,000f0000ffceffff:Soften=1,20,0/之后的第二个数字来调整模糊的半径（在上面的例子中为Soften=）。

这样做的好处是代码更轻，并且与能够加载图像的每个设备和浏览器完全兼容！