Javascript iOS 7'；使用CSS的模糊叠加效果？

苹果的覆盖层似乎不仅仅是一种透明度。关于如何使用CSS和JS实现这种效果，有什么想法吗

---

对此我不是很确定，我相信CSS目前无法做到这一点

---

然而，Chris Coyier在博客中介绍了一种使用多个图像的旧技术，以实现这种效果，

CSS3可以：

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

---

这里的示例=>

昨天做了一个快速演示，它实际上实现了您所谈论的内容。 这个演示基于加速计进行视差测量，因此它在iPhone上的效果最好。我基本上只是把我们叠加的内容复制到一个固定位置的元素中，这个元素会变得模糊

注意：向上滑动以查看面板

（我使用了可怕的css id，但你明白了）

• 克隆要模糊的元素
• 将其附加到要位于顶部的图元（磨砂窗）
• 使用webkit过滤器模糊克隆元素
• 确保克隆的元素处于绝对位置
• 滚动原始元素的父元素时，捕获scrollTop和scrollLeft
• 使用requestAnimationFrame，现在将webkit转换动态设置为translate3d，x和y值设置为scrollTop和scrollLeft

例如：

• 确保在webkit浏览器中打开
• 滚动手机内部视图（最好使用苹果鼠标…）
• 请参见在操作中模糊页脚

你让我想尝试，所以我尝试了，请查看下面的示例：

使用：

硬件加速CSS过滤器

用于类分配和箭头键事件的JS

图像CSS剪辑属性

就这样

---

我还相信，如果使用canvas复制当前dom并使其模糊，任何屏幕都可以动态执行此操作。

查看此演示页面
此演示使用html2canvas将文档呈现为图像

单击“显示弹出窗口”链接时，将调用“makePopup”函数

“makePopup”运行html2canvas，将文档呈现为图像

图像将转换为数据url字符串，并绘制为弹出窗口的背景图像

弹出窗口的背景被模糊-webkit过滤器：模糊

将弹出窗口追加到文档中

当您拖动弹出窗口时，它会更改自己的背景位置

---

多亏了style属性，FireFox现在可以做到这一点

此实验属性允许您使用任何HTML内容作为背景图像。因此，要创建背景，需要三个覆盖：

具有坚实背景的简单覆盖（隐藏真实覆盖内容）

用设置内容的

-moz元素

背景覆盖。请注意，FX不支持

filter:blur（）

属性，因此我们需要一个SVG

覆盖非模糊内容

所以，把它们放在一起：

SVG模糊过滤器（在FX中工作，其他浏览器可以使用

filter:blur（）

）：

最后三层：

<div class="header" style="background-color: #fff">&nbsp;</div>
<div class="header behind-blur">&nbsp;</div>
<div class="header">
    Header Text, content blurs behind
</div>

[编辑] 在未来的（移动）Safari 9中，将有

-webkit background filter

，用于此目的。看看我用来展示它的钢笔

在过去的4周里，我一直在思考这个问题，并提出了这个解决方案

[编辑] 我在网上写了一篇更深入的帖子

此技术正在使用，因此浏览器支持目前不是最好的。（）

该技术的关键部分是使用CSS区域将内容从布局中分离出来。首先使用

流到：content

定义

.content

元素，然后使用适当的结构模糊标题

布局结构：

<div class="phone">
 <div class="phone__display">
  <div class="header">
    <div class="header__text">Header</div>
    <div class="header__background"></div>
  </div>
  <div class="phone__content">
  </div>
 </div>
</div>

以适应变换

这项工作目前正在：

• Chrome 29+（启用“实验性webkit功能”/“启用-实验性-web-platform-features”）
• Safari 6.1种子6
• iOS7（速度慢且无滚动）

---

我一直在使用svg过滤器为精灵实现类似的效果

<svg id="gray_calendar" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
  <filter id="greyscale">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
  <image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>

• viewBox属性将仅选择所包含图像中所需的部分
• 只需将过滤器更改为您想要的任何过滤器，例如Keith的
  示例
• 使用
  标记将其应用于任何图像，甚至可以使用多个图像
• 您可以使用js构建它，并将其用作图像或在css中使用id

---

前几天我发现这支笔做得很漂亮，只有一点css和21行javascript。直到我找到这个命令，我才听说clonenodejs命令，但它完全满足了我的需要

详情： 答：基本上，它会查看您的content div并在其上调用cloneNode，从而创建一个副本，然后将其放置在页面顶部的overflow:hidden header对象中。 然后，它只听滚动，使两个图像似乎匹配和模糊的标题图像。。。嗯，砰。取得的效果

---

直到他们在语言中内置了少量的脚本能力，才真正能够完全使用CSS。

以下是我对jQuery的看法。解决方案不是通用的，这意味着必须根据实际设计调整一些位置和内容

基本上，我所做的是：在触发时克隆/删除整个背景（应该模糊的内容）到一个包含未模糊内容的容器中（如果不是全宽，则可以选择隐藏溢出），并正确定位。需要注意的是，在窗口上调整模糊div的大小将在位置上与原来的不匹配，但这可以通过一些窗口上调整大小的功能来解决（老实说，我现在不介意）

我非常感谢您对这个解决方案的意见

谢谢

这是未在IE中测试的

HTML

<div class="slide-up">
<div class="slide-wrapper">
    <div class="slide-background"></div>
    <div class="blured"></div>
    <div class="slide-content">
         <h2>Pop up title</h2>

        <p>Pretty neat!</p>
    </div>
</div>
</div>
<div class="wrapper">
<div class="content">
     <h1>Some title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit.</p>
</div> <a class="trigger" href="#">trigger slide</a>

</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
    <feGaussianBlur stdDeviation="3" />
</filter>
</svg>

jQuery

// first just grab some pixels we will use to correctly position the blured element
var height = $('.slide-up').outerHeight();
var slide_top = parseInt($('.slide-up').css('top'), 10);
$wrapper_width = $('body > .wrapper').css("width");
$('.blured').css("width", $wrapper_width);

$('.trigger').click(function () {
    if ($(this).hasClass('triggered')) { // sliding up
        $('.blured').animate({
            height: '0px',
            background: background
        }, 1000, function () {
            $('.blured .wrapper').remove();
        });
        $('.slide-up').slideUp(700);
        $(this).removeClass('triggered');
    } else { // sliding down
        $('.wrapper').clone().appendTo('.blured');
        $('.slide-up').slideDown(1000);
        $offset = $('.slide-wrapper').offset();
        $('.blured').animate({
            height: $offset.top + height + slide_top + 'px'
        }, 700);
        $('.blured .wrapper').animate({
            left: -$offset.left,
            top: -$offset.top
        }, 100);
        $(this).addClass('triggered');
    }
});

看看这个 好像是真的

<div class="phone">
 <div class="phone__display">
  <div class="header">
    <div class="header__text">Header</div>
    <div class="header__background"></div>
  </div>
  <div class="phone__content">
  </div>
 </div>
</div>

.header__background:before{
  display:inline-block;
  content:'';
  height:$HeightOfTheHEader
}

<svg id="gray_calendar" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
  <filter id="greyscale">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
  <image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>

<div class="slide-up">
<div class="slide-wrapper">
    <div class="slide-background"></div>
    <div class="blured"></div>
    <div class="slide-content">
         <h2>Pop up title</h2>

        <p>Pretty neat!</p>
    </div>
</div>
</div>
<div class="wrapper">
<div class="content">
     <h1>Some title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit.</p>
</div> <a class="trigger" href="#">trigger slide</a>

</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
    <feGaussianBlur stdDeviation="3" />
</filter>
</svg>

body {
margin: 0;
padding: 0;
font-family:'Verdana', sans-serif;
color: #fff;
}
.wrapper {
position: relative;
height: 100%;
overflow: hidden;
z-index: 100;
background: #CD535B;
}
img {
width: 100%;
height: auto;
}
.blured {
top: 0;
height: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
position: absolute;
z-index: 1000;
}
.blured .wrapper {
position: absolute;
width: inherit;
}
.content {
width: 300px;
margin: 0 auto;
}
.slide-up {
top:10px;
position: absolute;
width: 100%;
z-index: 2000;
display: none;
height: auto;
overflow: hidden;
}
.slide-wrapper {
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #fff;
overflow: hidden;
}
.slide-content {
z-index: 2222;
position: relative;
text-align: center;
color: #333333;
}
.slide-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1500;
opacity: 0.5;
}

// first just grab some pixels we will use to correctly position the blured element
var height = $('.slide-up').outerHeight();
var slide_top = parseInt($('.slide-up').css('top'), 10);
$wrapper_width = $('body > .wrapper').css("width");
$('.blured').css("width", $wrapper_width);

$('.trigger').click(function () {
    if ($(this).hasClass('triggered')) { // sliding up
        $('.blured').animate({
            height: '0px',
            background: background
        }, 1000, function () {
            $('.blured .wrapper').remove();
        });
        $('.slide-up').slideUp(700);
        $(this).removeClass('triggered');
    } else { // sliding down
        $('.wrapper').clone().appendTo('.blured');
        $('.slide-up').slideDown(1000);
        $offset = $('.slide-wrapper').offset();
        $('.blured').animate({
            height: $offset.top + height + slide_top + 'px'
        }, 700);
        $('.blured .wrapper').animate({
            left: -$offset.left,
            top: -$offset.top
        }, 100);
        $(this).addClass('triggered');
    }
});

var vague = $blurred.find('iframe').Vague({
  intensity:5 //blur intensity
});
vague.blur();

.myBox {
  width: 750px;
  height: 500px;
  border: rgba(0, 0, 0, 0.5) 1px solid;
  background-color: #ffffff;
}

.blurBg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.blurBg img {
  -webkit-filter: blur(50px);
  margin-top: -150px;
  margin-left: -150px;
  width: 150%;
  opacity: 0.6;
}

.my-class {
    backdrop-filter: blur(30px);
    background: transparent;     // Make sure there is not backgorund
}