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

Question

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

javascriptcssuser-interfaceblur

161

看起来苹果的叠层效果不仅是透明度，有没有用CSS和可能的JS实现这种效果的想法？

不仅是透明度

- Lumpy

2

在我看来，更紧迫的问题是如何设置一个元素，使其对其后面的任何对象应用动态模糊。因此，如果您有一个可以平移和缩放的对象，顶部的元素将以低性能损失动态模糊。 - Rhodes

1

请参考这个问题以解决类似的问题。 - Keith

43

我认为最令人担忧的是，这被视为“IOS7功能”，而Windows Vista Aero界面自2006年以来就一直在使用相同的窗口装饰。 - Niels Keurentjes

1

@NielsKeurentjes 嘿，说得好。几年前，在受到Windows的启发后，我将这种效果融入了一个设计中。然而，那时我选择了更简单的路线，只是将效果直接嵌入图像中。http://www.ryanwilliams.co.uk/previews/made2race/1.html - Ryan Williams

http://geoffreydesigns.com/ios-parallax-effect-with-css/ - Geoffrey Burdett

14个回答

48

你的启发促使我去尝试，于是我做了，并在此处查看示例：

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

使用：

硬件加速CSS滤镜
JS用于类分配和箭头键事件
图像CSS剪辑属性

就是这样。

我也相信，如果使用画布复制当前dom并模糊它，可以动态地为任何屏幕完成此操作。

- Edo Ben Shitrit

39

[编辑] 在未来的（移动）Safari 9中，将会有-webkit-backdrop-filter来实现这一点。请查看我创建的此代码片段进行展示。

我思考了4周，想出了这个解决方案。

实时演示

[编辑] 我在CSS-Tricks上写了一篇更详细的文章。

这种技术使用了CSS Regions，所以目前浏览器支持并不是最好的。（http://caniuse.com/#feat=css-regions）

这种技术的关键部分是通过使用 CSS Region 将内容与布局分开。首先定义一个带有 flow-into: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>

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

使用CSS Regions很简单，只需flow-from:content（.content正在流入命名区域content）。

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

这是通过transfrom:translateY(-$HeightOfTheHeader) .content来完成的，以确保内容始终会流经.header__background。这种转换将始终隐藏标题下方的一些内容。修复这个问题很容易，只需添加：

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

为适应变换而进行调整。

目前已在以下浏览器中运行：

Chrome 29+（启用“experimental-webkit-features”/“enable-experimental-web-platform-features”）
Safari 6.1 Seed 6
iOS7（速度慢，无滚动）

- FWeinb

1

现场演示不再有效。内容显示在手机下方，我收到JS错误“TypeError：sheet.addRule不是函数”。 - BoffinBrain

在Mac和iOS上与Safari兼容良好。 - Carlos Silva

16

现在，通过元素样式属性，使用Firefox实现这种效果已经有了一定的可能性。

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

带有实心背景的简单遮罩层（用于隐藏真正的覆盖内容）。
使用 -moz-element 背景设置内容的遮罩层。请注意，FX 不支持 filter: blur() 属性，因此我们需要使用 SVG。
非模糊内容的遮罩层。

组合起来如下：

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

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

CSS 模糊样式：

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

最后是三层：

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

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

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

这里是一个FX的纯JS Fiddle演示。

- Keith

1

你的解决方案与我想到的类似。我通过扩展背景模糊的切片来修复了故障（http://jsfiddle.net/RgBzH/30/），因此模糊实际上发生在真正的内容上，而不是切片上。无论如何，执行得很好。 - Pier Paolo Ramon

@PierPaoloRamon 不错的调整 - 如果我要使用它，我可能会稍微扩展SVG过滤器，以包括iOS7所做的增加亮度/降低对比度，但FX目前仅意味着严格的沙盒。我已经提出了另一个问题（https://dev59.com/53fZa4cB1Zd3GeqPNBOA）关于解决方法。 - Keith

顺便说一句，你的解决方案只是将 iOS7 风格的模糊效果带到了 Firefox OS 上，这很不错（我得测试一下）。 - Pier Paolo Ramon

14

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

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

当点击“显示弹出窗口”链接时，将调用“makePopup”函数。
“makePopup”运行html2canvas以将文档呈现为图像。
图像转换为数据URL字符串，并将其绘制为弹出窗口的背景图像。
弹出窗口的背景模糊处理使用-webkit-filter:blur
将弹出窗口附加到文档中。
在拖动弹出窗口时，它会更改自己的背景位置。

- Gyutae Jo

1

请解释一下演示实际上是做什么的，因为一旦它停止，它就没有任何帮助了。 - Jonathan Drapeau

这是一个非常好的想法 - 不幸的是，html2canvas 目前还处于实验阶段，不能被可靠地依赖，而且除非你的应用程序完全关注截屏，否则它可能太大了。 - Keith

5

它下跌了，就像你预测的那样，@JonathanDrapeau。 - Mark

哇！我喜欢链接腐烂！ - evolutionxbox

仍然在图像上使用模糊效果，我不知道这在像粘性导航栏这样的东西上如何运作。 - maninak

10

我最近发现的这支笔的表现非常出色，只需要一点CSS和21行Javascript代码。在找到这个代码之前，我还没有听说过cloneNode JS命令，但是它完全满足了我的需求。

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

详情： A. 该代码会查看您的内容div，并在其上调用cloneNode以创建一个重复项，然后将其放置在位于页面顶部的overflow:hidden标头对象内。 B. 然后它简单地监听滚动事件，使得两个图像看起来相同并模糊标头图像……然后效果就实现啦。

在CSS中不太容易实现，直到他们将一小部分可编程性内置到语言中为止。

- Lux.Capacitor

看起来很不错！尽管这对于动态内容显然不太适用，除非您在每次更改时更新副本-这可能会对性能造成很大的影响。 - Nass

我猜，但不确定你会在哪里更改图像并尝试实现这种效果？如果正确执行，如果您回收克隆，则不应该有太大影响。也许您可以详细说明一个相反的情况？例如，假设您制作了一个图像源，并希望为每个项目的图像菜单显示一些菜单选项...在揭示面板时运行此操作，覆盖的面板将看起来像海报所需的那样。添加一个小型回收器，以便dom不会在每次打开菜单时无限复制图像，它应该表现得很好。 - Lux.Capacitor

5

克隆要模糊的元素
将其附加到要在顶部显示的元素上（即毛玻璃窗口）
使用webkit-filter模糊克隆的元素
确保克隆的元素定位为absolute
当滚动原始元素的父元素时，捕获scrollTop和scrollLeft
使用requestAnimationFrame，现在动态设置webkit-transform以使用x和y值来translate3d到scrollTop和scrollLeft

示例在此处：

请务必在webkit浏览器中打开
在手机视图内滚动（最好使用苹果鼠标...）
查看模糊的页脚效果

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

- user2523905

4

我昨天制作了一个快速演示，实际上就是你谈论的内容。http://bit.ly/10clOM9 这个演示根据加速度计进行视差处理，因此在iPhone上效果最佳。我基本上只是将我们叠加的内容复制到一个固定位置元素中并进行模糊处理。

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

（我使用了可怕的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);
}

- ericjbasti

3

请查看这个链接：http://codepen.io/GianlucaGuarini/pen/Hzrhf，它似乎可以实现元素背景图像不重复的效果。在示例中，文本也会模糊。

Vague.js

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

- Onur Çelik

1

它复制了内容（在您链接的CodePen示例中有两个iframe）。尝试单击菜单项，模糊的iframe不会更新。 - Guglie

这在某种程度上算是一个解决方案。 - Onur Çelik

3

我不太确定，但我认为CSS目前还不能做到这一点。然而，Chris Coyier在他的博客中介绍了一种使用多张图片实现此效果的老技术。 http://css-tricks.com/blurry-background-effect/

- Zyad Sherif

将屏幕快照转换为画布可能有效，并且在此之前“锁定”图标和背景，但是当模糊时我无法确定背景是否仍然具有视差效果...如果没有，那么一旦您开始移动控制面板（透明覆盖层），设备就会创建屏幕图像并在其上执行这种诡计。请注意，当他们这样做时，他们不仅受到基于Web的东西（如画布）的限制，因为它是在操作系统级别进行的，而且可能不仅限于WebKit。 - nosarious

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cana · Accepted Answer

146

CSS3可以实现以下效果:

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

这里有个例子 => jsfiddle

- Cana

120

这不能达到iOS7中元素模糊背景的效果。 - Design by Adrian

9

我编辑了我的jsfiddle，现在它的效果与IOS7类似;) => CSS3 IOS7效果 - Cana

34

正如Adrian所指出的那样，该滤镜仅模糊一个元素及其子元素。它不能用于模糊父元素或相邻元素的覆盖层，因此不能使用CSS实现iOS 7效果。 - Jason

11

如果你认为这只是模糊效果的作用，那么你就错了。我正在开发一个简单的开源库，通过 JS 和 CSS 3 实现这种效果，敬请关注 :) - Ryan Brodie

5

这在FX中不起作用 - 它们不支持“-moz-filter: blur()”。相反，您必须使用SVG滤镜，请查看我的答案以获取详细信息。 - Keith

显示剩余9条评论