iOS 7的模糊覆盖效果使用CSS？
看起来苹果的覆盖不仅仅是一个透明度。 任何想法如何实现这个效果与CSS和可能的JS？
这是可能的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
你让我想尝试，所以我做了，看看这里的例子：
http://codepen.io/Edo_B/pen/cLbrt
使用：
- 硬件加速的CSSfilter
- JS的类分配和箭头键事件
- 图像CSS剪辑属性
而已。
我也相信，如果使用canvas复制当前的dom并模糊它，可以dynamic地为任何屏幕完成。
[编辑]在未来的（移动）Safari 9中，将会出现-webkit-backdrop-filter 。 看到我用这个笔来展示它。
我在过去的四周里想到了这个，并提出了这个解决scheme。
现场演示
[编辑]我写了一个更深入的CSS技巧的post
这种技术正在使用CSS区域，因此浏览器支持目前并不是最好的。 （ http://caniuse.com/#feat=css-regions ）
这项技术的关键部分是通过使用CSS区域分割布局的内容。 首先用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 – 这些是内容应该stream过的容器。
使用CSS区域就像flow-from:content简单flow-from:content （ .contentstream入命名的区域content ）
现在来了棘手的部分。 我们希望始终通过.header__backgroundstream动内容，因为这是内容将变得模糊的部分。 （使用webkit-filter:blur(10px); ）
这是通过transfrom:translateY(-$HeightOfTheHeader) .content来完成的，以确保内容将始终stream经.header__background 。 这种转换总是隐藏标题下的一些内容。 解决这个问题很容易添加
.header__background:before{ display:inline-block; content:''; height:$HeightOfTheHEader }
以适应变换。
这目前正在：
- Chrome 29+（启用'experimental-webkit-features'/'enable-experimental-web-platform-features'）
- Safari 6.1种子6
- iOS7（ 慢速和不滚动 ）
看看这个演示页面。
此演示使用html2canvas将文档呈现为图像。
http://blurpopup.labs.daum.net/
- 当点击“显示popup”链接时，调用“makePopup”函数。
- “makePopup”运行html2canvas将文档呈现为图像。
- 图像被转换为data-urlstring，并被绘制为popup框的背景图像。
- Popup的BG由-webkit-filter：blur模糊
- 将popup式追加到文档中。
- 当你拖动popup窗口时，它会改变它自己的背景位置。
这是由于元素样式属性，现在可以使用FireFox。
这个实验性的属性可以让你使用任何HTML内容作为背景图片。 所以，要创build背景，您需要三个覆盖层：
- 用简单的背景叠加（隐藏真实的叠加内容）。
- 用设置内容的
-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; }
最后3层：
<div class="header" style="background-color: #fff"> </div> <div class="header behind-blur"> </div> <div class="header"> Header Text, content blurs behind </div>
然后移动这个只是设置background-position （在jQuery中的样本，但你可以使用任何东西）：
$('.behind-blur').css({ 'background-position': '-' + left + 'px -' + top + 'px' });
这只是一个JS小提琴，只有FX。
这天我发现这支笔似乎很漂亮，只是一点CSS和21行的JavaScript。 我没有听说过cloneNode js命令，直到我发现这个，但它确实为我所需要的。
http://codepen.io/rikschennink/pen/zvcgx
细节：A.基本上它会查看你的内容div并调用一个cloneNode，所以它会创build一个副本，然后将其放在overflow中：位于页面顶部的隐藏的header对象。 B.然后，它只是监听滚动，使两个图像似乎匹配，并模糊标题图像… annnnd BAM。 达到的效果。
在CSS中不能完全实现，直到他们获得了语言中可用的脚本。
- 克隆你想要模糊的元素
- 将它附加到你想要在最上面的元素（磨砂窗口）
- 与webkitfilter模糊克隆的元素
- 确保克隆的元素是绝对定位的
- 当滚动原始元素的父级，catch scrollTop和scrollLeft
- 使用requestAnimationFrame，现在将webkit-transformdynamic设置为translate3d，其中x和y值为scrollTop和scrollLeft
例如：
- 确保在webkit浏览器中打开
- 在手机视图中滚动（最好用苹果鼠标…）
- 看到模糊页脚在行动
昨天做了一个快速演示，实际上是你所说的。 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); }
对此我不太确定，我相信CSS目前还无法做到这一点
不过，克里斯·科伊尔（Chris Coyier）曾经发表过一篇关于多种图像的旧技术来达到这样的效果， http://css-tricks.com/blurry-background-effect/
检查这一个出http://codepen.io/GianlucaGuarini/pen/Hzrhf似乎它没有重复的元素在其自身的背景图像的效果。; 在示例中也可以看到文字模糊。
Vague.js
var vague = $blurred.find('iframe').Vague({ intensity:5 //blur intensity }); vague.blur();
我一直在使用svgfilter来实现类似的精灵效果
<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属性将只select你想要包含的图像的一部分。
- 只要将filter更改为任何你想要的，比如Keith的
<feGaussianBlur stdDeviation="10"/>例子。 - 使用
<image ...>标记将其应用于任何图像，甚至可以使用多个图像。 - 你可以用js来构build它，并把它用作图像或者在你的css中使用这个id。
这可能会帮助你！
这dynamic改变IOS的背景
.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; }
这是我用jQuery采取这一点。 解决scheme不是普遍的，这意味着根据实际devise，必须调整一些职位和东西。
基本上我所做的是：在触发器克隆/删除整个背景（应该模糊）到一个容器与非模糊内容（可选，如果它不是全宽隐藏溢出），并正确定位。 警惕的是，在窗口resize模糊div将不匹配原来的位置方面，但这可以解决一些窗口resizefunction（老实说，我不能打扰现在）。
我真的很感激你对这个解决scheme的意见！
谢谢
这里是小提琴 ，没有在IE中testing。
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>
CSS
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; }
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'); } });
