我如何在地方图片上重新创建这个谷歌加效果

Question

我只是在看一个google plus地方，我看到这个很酷的模糊效果在图像上 - 封面照片的左侧，无论如何重新创建这个，我尝试了一些css模糊的东西和几个插件虽然他们似乎没有接近重建这一点。

您认为这是怎么做到的？

https://plus.google.com/u/0/100447465665053723801/posts

使用：

blur.js foggy.js

.blur {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}

Answer 1

Google使用了两张图片副本。一个常规和一个模糊。然后他们叠加并剪辑它们。

Answer 2

他们生成了标题图片的模糊图像版本。查看HTML / CSS，您可以在此处找到图像：

https://lh5.googleusercontent.com/-nvDu86PoiAc/Uzylet0y0CI/AAAAAAAAABE/3mMd0DUauUY/s630-fcrop64=1,00411693ffffee64:Soften=1,60,0/Resort%2BPool%2B-%2Bdusk%2B2.jpg

然而，您可以使用CSS模糊完成您尝试完成的任务。

<div style="position: relative;">
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: blur(50px);">
        <!-- your image here -->
    </div>
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
        <!-- your content here -->
    </div>
</div>

显然，你不会把你的CSS内联。图像div必须是分开的，否则您的内容也会变得模糊。此外，我应该注意，如果你正在尝试的话，很可能无法模糊部分图像。您需要两次使用相同的图像。