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

iOS 7's blurred overlay effect using CSS?

提问by Lumpy

It seems Apple's overlay is more than just a transparency. Any ideas on how to achieve this effect with CSS and possibly JS?

看起来苹果的覆盖不仅仅是一种透明度。关于如何使用 CSS 和可能的 JS 实现这种效果的任何想法？

采纳答案by Cana

It is possible with CSS3 :

使用 CSS3 是可能的：

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

Example here => jsfiddle

此处示例 => jsfiddle

回答by Edo Ben Shitrit

You made me want to try, so I did, check out the example here:

你让我想尝试，所以我做了，看看这里的例子：

http://codepen.io/Edo_B/pen/cLbrt

http://codepen.io/Edo_B/pen/cLbrt

Using:

使用：

1. HW Accelerated CSS filters
2. JS for class assigning and arrow key events
3. Images CSS Clip property

1. 硬件加速 CSS 过滤器
2. 用于类分配和箭头键事件的 JS
3. 图像 CSS 剪辑属性

that's it.

就是这样。

I also believe this could be done dynamically for any screen if using canvas to copy the current dom and blurring it.

我也相信这可以在任何屏幕上动态完成，如果使用画布复制当前 dom 并对其进行模糊处理。

回答by FWeinb

[Edit] In the future (mobile) Safari 9 there will be -webkit-backdrop-filterfor exactly this. See thispen I made to showcase it.

[编辑] 在未来的（移动）Safari 9 中将会有-webkit-backdrop-filter这个功能。看看我为展示它而制作的这支笔。

I thought about this for the last 4 weeks and came up with this solution.

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

Live Demo

现场演示

[Edit] I wrote a more indepth post on CSS-Tricks

[编辑] 我写了一篇关于CSS-Tricks的更深入的帖子

This technique is using CSS Regionsso the browser support is not the best at this moment. (http://caniuse.com/#feat=css-regions)

此技术使用CSS 区域，因此目前浏览器支持不是最好的。( http://caniuse.com/#feat=css-regions)

The key part of this technique is to split apart content from layout by using CSS Region. First define a .contentelement with flow-into:contentand then use the appropriate structure to blur the header.

该技术的关键部分是使用 CSS Region 从布局中分离内容。首先定义一个.content元素，flow-into:content然后使用适当的结构来模糊标题。

The layout structure:

布局结构：

<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>

The two important parts of this layout are .header__backgroundand .phone__content- these are the containers where the content should flow though.

这个布局的两个重要部分是.header__background和.phone__content- 这些是内容应该流动的容器。

Using CSS Regions it is simple as flow-from:content(.contentis flowing into the named region content)

使用 CSS 区域很简单，因为flow-from:content（.content流入命名区域content）

Now comes the tricky part. We want to always flow the content through the .header__backgroundbecause that is the section where the content will be blured. (using webkit-filter:blur(10px);)

现在是棘手的部分。我们希望始终让内容流过 ，.header__background因为那是内容会模糊的部分。（使用webkit-filter:blur(10px);）

This is done by transfrom:translateY(-$HeightOfTheHeader)the .contentto ensure that the content will always flow though the .header__background. This transform while always hide some content beneath the header. Fixing this is ease adding

这样做transfrom:translateY(-$HeightOfTheHeader)是.content为了确保内容始终通过.header__background. 这种转换总是在标题下隐藏一些内容。解决这个问题很容易添加

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

to accommodate for the transform.

以适应变换。

This is currently working in:

这目前在：

• Chrome 29+ (enable 'experimental-webkit-features'/'enable-experimental-web-platform-features')
• Safari 6.1 Seed 6
• iOS7 (slow and no scrolling)

• Chrome 29+（启用'experimental-webkit-features'/'enable-experimental-web-platform-features'）
• Safari 6.1 种子 6
• iOS7（缓慢且无滚动）

回答by Keith

This is sort of possible with FireFox now thanks to the elementstyle attribute.

由于元素样式属性，FireFox 现在可以做到这一点。

This experimental attribute lets you use any HTML content as a background image. So, to create the background you need three overlays:

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

1. Simple overlay with a solid background (to hide the real overlay content).
2. Overlay with a -moz-elementbackground that sets the content. Note that FX doesn't support the filter: blur()attribute, so we need to us an SVG.
3. Overlay with non blurred content.

1. 带有纯色背景的简单叠加（隐藏真实的叠加内容）。
2. 与-moz-element设置内容的背景叠加。请注意，FX 不支持该filter: blur()属性，因此我们需要一个 SVG。
3. 与非模糊内容叠加。

So, put together:

所以，放在一起：

SVG blur filter (works in FX, other browsers could use filter:blur()):

SVG 模糊滤镜（适用于 FX，其他浏览器可以使用filter:blur()）：

<svg>
  <defs>
    <filter id="svgBlur">
      <feGaussianBlur stdDeviation="10"/>
    </filter>
  </defs>
</svg>

CSS blur style:

CSS 模糊样式：

.behind-blur 
{
    filter         : url(#svgBlur); 
    opacity: .4;
    background: -moz-element(#content);
    background-repeat: no-repeat;
}

Finally 3 layers:

最后3层：

<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>

Then to move this around just set the background-position(sample in jQuery but you could use anything):

然后要移动它，只需设置background-position（jQuery 中的示例，但您可以使用任何东西）：

$('.behind-blur').css({
    'background-position': '-' + left + 'px -' + top + 'px'
}); 

Here it is as a JS Fiddle, FX only.

这里是 JS Fiddle，仅限 FX。

回答by Gyutae Jo

Check out this demo page.
This demo uses html2canvas for rendering document as an image.

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

http://blurpopup.labs.daum.net/

http://blurpopup.labs.daum.net/

1. When the "Show popup" link is clicked, the 'makePopup' function is called.
2. 'makePopup' runs html2canvasfor rendering document as an image.
3. The image is converted to data-url string and it is painted as the popup's background-image.
4. Popup's bg is blurred by -webkit-filter:blur
5. Append the popup into document.
6. While you're dragging the popup, it changes its own background-position.

1. 单击“显示弹出窗口”链接时，将调用“makePopup”函数。
2. 'makePopup' 运行html2canvas以将文档呈现为图像。
3. 图像被转换为​​ data-url 字符串，并被绘制为弹出窗口的背景图像。
4. Popup 的 bg 被-webkit-filter:blur 模糊
5. 将弹出窗口附加到文档中。
6. 当您拖动弹出窗口时，它会更改自己的背景位置。

回答by Lux.Capacitor

This pen I found the other day seemed to do it beautifully, just a bit of css and 21 lines of javascript. I hadn't heard of the cloneNode js command until I found this, but it totally worked for what I needed for sure.

我前几天发现的这支笔似乎做得很漂亮，只需一点 css 和 21 行 javascript。在我发现它之前，我还没有听说过 cloneNode js 命令，但它完全可以满足我的需求。

http://codepen.io/rikschennink/pen/zvcgx

http://codepen.io/rikschennink/pen/zvcgx

Detail: A. Basically it looks at your content div and invokes a cloneNode on it so it creates a duplicate which it then places inside the overflow:hidden header object sitting on top of the page. B. Then it simply listens for scrolling so that both images seem to match and blurs the header image... annnnd BAM. Effect achieved.

详细信息： A. 基本上它会查看您的内容 div 并在其上调用 cloneNode，因此它会创建一个副本，然后将其放置在位于页面顶部的 overflow:hidden 标题对象中。B. 然后它只是侦听滚动，以便两个图像似乎匹配并模糊标题图像... annnnd BAM。达到的效果。

Not really fully do-able in CSS until they get the lil bit of scriptability built into the language.

在 CSS 中获得内置于语言中的一点点脚本能力之前，在 CSS 中并不是完全可行的。

回答by user2523905

• clone the element you want to blur
• append it to the element you want to be on top (the frosted window)
• blur cloned element with webkit-filter
• make sure cloned element is positioned absolute
• when scrolling the original element's parent, catch scrollTop and scrollLeft
• using requestAnimationFrame, now set the webkit-transform dynamically to translate3d with x and y values to scrollTop and scrollLeft

• 克隆要模糊的元素
• 将它附加到您想要位于顶部的元素（磨砂窗口）
• 使用 webkit-filter 模糊克隆元素
• 确保克隆元素被定位为绝对
• 滚动原始元素的父元素时，捕获 scrollTop 和 scrollLeft
• 使用 requestAnimationFrame，现在将 webkit-transform 动态设置为 translate3d，x 和 y 值为 scrollTop 和 scrollLeft

Example is here:

示例在这里：

• make sure to open in webkit-browser
• scroll inside phone view (best with apple mouse...)
• see blurring footer in action

• 确保在 webkit-browser 中打开
• 在手机视图内滚动（最好使用苹果鼠标......）
• 看到模糊的页脚在行动

http://versie1.com/TEST/ios7/

http://versie1.com/TEST/ios7/

回答by ericjbasti

made a quick demo yesterday that actually does what your talking about. http://bit.ly/10clOM9this demo does the parallax based on the accelerometer so it works best on an iPhone itself. I basically just copy the content we are overlaying into a fixed position element that gets blurred.

昨天做了一个快速演示，实际上做了你所说的。http://bit.ly/10clOM9这个演示基于加速度计进行视差，因此它在 iPhone 本身上效果最好。我基本上只是将我们正在覆盖的内容复制到一个固定位置的元素中，该元素变得模糊。

note: swipe up to see the panel.

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

(i used horrible css id's but you get the idea)

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

#frost{
 position: fixed; 
 bottom: 0; 
 left:0; 
 width: 100%; 
 height: 100px; 
 overflow: hidden;
 -webkit-transition: all .5s;
}
#background2{
 -webkit-filter: blur(15px) brightness(.2);
}

#content2fixed{
 position: fixed;
 bottom: 9px;
 left: 9px;
 -webkit-filter: blur(10px);
}

回答by Zyad Sherif

Am not very sure about that, I believe that CSS isn't capable of doing this at the moment

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

However Chris Coyier has blogged about an old technique with multiple images to achieve such effect, http://css-tricks.com/blurry-background-effect/

然而 Chris Coyier 已经在博客中介绍了一种使用多个图像来实现这种效果的旧技术，http://css-tricks.com/blurry-background-effect/

回答by Onur ?elik

Check this one out http://codepen.io/GianlucaGuarini/pen/HzrhfSeems like it does the effect without duplication the background image of the element under itself. See texts are blurring also in the example.

看看这个http://codepen.io/GianlucaGuarini/pen/Hzrhf似乎它没有复制自身下元素的背景图像就可以产生效果。参见示例中的文本也变得模糊。

Vague.js

Vague.js

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