Question

我们有一个大型应用程序，我们希望在演练期间模糊整个网站，除了一些项目。好像它是叠加层。

我们已经探索过以下内容： 1.对身体涂抹模糊，但这意味着所有底层物品都会模糊不清。 2.使用html2canvas在画布中创建副本，但这太过于性能不足。

由于我们的客户经常使用没有显卡和应用程序大小的慢速机器，我们无法进行大型dom操作或重度jQuery使用。

有什么建议吗？

编辑：我还应该补充一点，我们只要求它在webkit浏览器中运行。

Answer 1

只需切换模糊类。 See JSFiddle。

<style>
.blur { 
    opacity: 0.4; 
}
.blur p {
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
    color: rgba(0, 0, 0, 0);
}
.blur img {
    -webkit-filter: blur(3px);        
    filter: blur(3px);
}
</style>

<script>
$(function(){
    $('.box').hover(function () {
        $('.box').addClass('blur');
        $(this).removeClass('blur');
    });
});    
</script>

<div class="box blur">
    <p>A</p>
    <img src="example.png">
</div>
<div class="box">
    <p>B</p>        
</div>

来源：http://tympanus.net/Tutorials/ItemBlur/

Answer 2

是的，你可以使用插件名Foggy ..

来做到这一点

检查this. ..它会帮助你

Answer 3

我可能会忽略这一点，但如果您只需要支持webkit浏览器，那么为什么不使用-webkit-filter：

nav, header, main, footer {
  -webkit-filter: grayscale(1) blur(5px);
}
*:hover {
  -webkit-filter: none;
}

我对旧版MacBook Pro的反应非常灵敏，很酷的是你有很多选项可以添加灰度，调整亮度，饱和度，对比度，不透明度等等。而且，它会相当简单和轻巧。在jQuery中为您的演练编写一个演示脚本，因为您需要做的就是删除或添加-webkit-filter到您想要的元素。

DEMO >

（我只是重复使用了Bootply，因为它有相当数量的内容）。

Answer 4

我不确定您的浏览器要求是什么，或者您正在开发的技术有多古老，但您可能会查看blur.js我可以看到它不是太重，依赖你有多少内容。

最糟糕的情况是，您可以使用绝对定位和z-index在活动区域和站点的其余部分之间放置一个全宽，全高的div，然后在其上运行模糊，以便活动区域具有外表是唯一不模糊的东西。

Answer 5

我遇到了同样的问题我找到的唯一解决方案是在内容上面有一个透明层，里面有一个洞。

.layer{
    position:fixed;
    width: 80px;
    height: 80px;
    top: 20px;
    left: 20px;
    box-shadow : 0 0 0 1000px red;
    opacity: 0.5;
}

http://jsfiddle.net/zLYjA/

如果您的机器速度慢，这是一个很好的解决方案。但是你需要做一些工作来确定你想要显示的元素的位置。

Answer 6

我给出了一种创建模态的简单方法。

您可以通过模糊除您不想要的项目之外的所有项目来实现此目的。将这些项目浮动在具有较高z-index

的模糊项目上

代表：

HTML：

<div class="blur">../*items to be blured */..</div>
<div class=floated-item">../*items not to be blured */..</div>

CSS：

  .blur{
    opacity:0.4;
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
  }
  .floated-item{
    z-index:999;
    position:fixed;
    margin-top:10%;
    margin-left:10%;
   }

除了某些项目，我可以模糊整个网站吗？

6 个答案:

DEMO >