小开

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

然而，克里斯 · 科伊尔(Chris Coyier)在他的博客中提到了一种使用多幅图像来达到这种效果的旧技术: http://css-tricks.com/blurry-background-effect/

小开

最佳答案

这是可能的 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

小开

昨天做了一个简短的演示，实际上就是你说的那样。 < a href = “ http://bit.ly/10clOM9”rel = “ nofollow”> 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);
}

小开

克隆要模糊的元素
将它附加到你想要在顶部的元素(霜结窗口)
使用 webkit-filter 模糊克隆元素
确保克隆元素的位置是绝对的
当滚动原始元素的父元素时，捕捉 scrollTop 和 scrollLeft
使用 requestAnimationFrame，现在动态地将 webkit 转换设置为 transate3d，并将 x 和 y 值设置为 scrollTop 和 scrollLeft

例如:

一定要在 webkit 浏览器中打开
滚动内部手机视图(最好的苹果鼠标...)
看到模糊的页脚

Http://versie1.com/test/ios7/

小开

你让我想试试，所以我就试了，看看这个例子:

Http://codepen.io/edo_b/pen/clbrt

使用:

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

就是这样。

我也相信这可以做任何屏幕动态如果使用画布复制当前模糊它。

小开

看看这个演示页面。
本演示使用 html2Canvas 将文档呈现为图像。

Http://blurpopup.labs.daum.net/

当单击“ Show popup”链接时，将调用“ makPopup”函数。
“ make Popup”运行 Html 2画布将文档呈现为图像。
图像被转换为 data-url 字符串，并被绘制为弹出窗口的背景图像。
弹出的大是模糊的 - webkit-过滤器: 模糊
将弹出窗口附加到文档中。
当您拖动弹出窗口时，它会改变自己的背景位置。

小开

多亏了元素风格属性，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'
});

在这里，它作为一个 JS 小提琴，只有外汇。

小开

[编辑] 在未来(移动) Safari 9将有 -webkit-backdrop-filter的确切这一点。看看我做的这个钢笔展示它。

在过去的四个星期里，我一直在思考这个问题，并且想出了这个解决方案。

现场演示

[编辑] 我在 CSS-技巧上写了一篇更深入的文章

这种技术使用的是 CSS 区域，所以目前浏览器支持不是最好的

该技术的关键部分是通过使用 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-这些是内容应该流动的容器。

使用 CSS 区域很简单，如 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
}

来适应变形。

目前正在开展的工作包括:

Chrome29 + (启用“實驗-webkit-Features”/“ able-實驗-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 的 <feGaussianBlur stdDeviation="10"/>示例。
使用 <image ...>标记可以将其应用于任何图像，甚至可以使用多个图像。
您可以使用 js 构建它，并将其用作图像或在 css 中使用 id。

小开

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

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

详情: 基本上，它查看您的内容 div 并在其上调用一个 cloneNode，以便创建一个副本，然后将其放在溢出内部: 位于页面顶部的隐藏头对象。 B.然后它只是听滚动，以便两个图像似乎匹配和模糊的标题图像... annnnd BAM。效果达到了。

在 CSS 中不能真正完全做到，除非它们在语言中内置了一点点脚本性。

小开

以下是我对 jQuery 的看法。解决方案并不是通用的，这意味着根据实际的设计需要调整一些位置和材料。

基本上我所做的是: 在触发器上克隆/删除整个背景(应该是模糊的)到一个容器与未模糊的内容(其中，可选地，有隐藏溢出，如果它不是全宽)和位置正确。警告是，在窗口大小模糊 div 将不匹配原来的位置，但这可以解决一些窗口大小调整功能(老实说，我现在不能与麻烦)。

我真的很感激你对这个解决方案的意见！

谢谢

这是小提琴，没有在 IE 中测试。

超文本标示语言

<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');
}
});

小开

看看这个 http://codepen.io/gianlucaguarini/pen/hzrhf 看起来它不需要重复元素下面的背景图像就能达到这个效果。看到文字也在模糊的例子。

模糊 Js

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

小开

这个也许能帮到你！

这动态地改变了背景，只有 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;
}

小开

好消息

到今天为止，这是很容易实现与 backdrop-filter CSS 属性，现在是一个稳定的功能在 Chrome 浏览器，Safari 和边缘。

我希望这在我们的混合移动应用程序，所以也可以在 Android/Chrome WebView 和 Safari WebView。

代码示例:

只需添加 CSS 属性:

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

UI 例子1

看看它在这个钢笔或尝试演示:

#main-wrapper {
width: 300px;
height: 300px;
background: url("https://i.picsum.photos/id/1001/500/500.jpg") no-repeat center;
background-size: cover;
position: relative;
overflow: hidden;
}


.my-effect {
position: absolute;
top: 300px;
left: 0;
width: 100%;
height: 100%;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
color: black;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
transition: top 700ms;
}


#main-wrapper:hover .my-effect {
top: 0;
}

<h4>Hover over the image to see the effect</h4>


<div id="main-wrapper">
<div class="my-effect">
Glossy effect worked!
</div>
</div>

UI 例子2

让我们以麦当劳的应用程序为例，因为它非常丰富多彩。我把它的屏幕截图，并添加到我的应用程序的 body的背景。

我想显示一个文字上面的光泽效果。在上面的覆盖图上使用 backdrop-filter: blur(20px);，我可以看到这个:

IOS7的模糊覆盖效果使用 CSS？

你让我想试试，所以我就试了，看看这个例子:

好消息

代码示例:

UI 例子1

UI 例子2