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

Question

Apple的叠加层似乎不仅仅是透明度。关于如何用CSS和可能的JS实现这种效果的任何想法？

More than just transparency

Answer 1

可以使用CSS3：

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

此处示例=＆gt; jsfiddle

Answer 2

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

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

使用：

HW Accelerated CSS过滤器
用于课程分配和箭头键事件的JS
图片CSS剪辑属性

就是这样。

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

Answer 3

[编辑] 在未来（移动）Safari 9中，-webkit-backdrop-filter就是这样。请参阅我制作的this笔来展示它。

在过去的4周里，我想到了这一点，并提出了这个解决方案。

Live Demo

[编辑] 我在CSS-Tricks

上写了一篇更深入的帖子

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

此技术的关键部分是使用CSS Region将内容与布局分开。首先使用.content定义flow-into: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
}

以适应变换。

目前正在开展工作：

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

Answer 4

由于element样式属性，现在可以使用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;
}

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

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

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

Here it is as a JS Fiddle, FX only.

Answer 5

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

<强> http://blurpopup.labs.daum.net/

单击“显示弹出窗口”链接时，将调用“makePopup”函数。
'makePopup'运行 html2canvas ，将文档渲染为图像。
图像将转换为data-url字符串，并将其绘制为弹出窗口的背景图像。
Popup的bg被 -webkit-filter：blur
将弹出窗口附加到文档中。
当您拖动弹出窗口时，它会更改自己的背景位置。

Answer 6

这笔我发现前几天似乎做得很漂亮，只需要一点点css和21行javascript。在我发现这个之前我没有听说过cloneNode js命令，但它完全适用于我需要的东西。

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

详情：答：基本上它会查看你的内容div并在其上调用cloneNode，因此它会创建一个副本，然后将其放在页面顶部的overflow：hidden标头对象中。 B.然后它只是听取滚动，这样两个图像似乎匹配并模糊标题图像... annnnd BAM。效果达到了。

除非他们在语言中内置了一小部分可编写脚本功能，否则在CSS中不能完全执行。

Answer 7

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

示例在这里：

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

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

Answer 8

昨天做了一个快速演示，实际上就是你所说的。 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);
}

Answer 9

我不太确定，我相信CSS目前无法做到这一点

然而，Chris Coyier在博客中发表了一篇关于使用多个图像来实现此类效果的旧技术，http://css-tricks.com/blurry-background-effect/

Answer 10

检查一下http://codepen.io/GianlucaGuarini/pen/Hzrhf 似乎它没有复制元素背景图像的效果。在示例中也看到文本模糊。

Vague.js

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

Answer 11

好消息

从今天（ 2020年4月11日）开始，ffmpeg -y -i output/no_bg_out.mp4 -i media/bg1.mp3 -filter_complex[1:a]volume=0.1apad[A];[0:a][A]amerge[out] -c:v copy -map 0:v -map [out] -shortest out.mp4 CSS属性很容易实现，而CSS属性现已成为Chrome，Safari和Edge中的稳定功能。

我想要在我们的混合移动应用程序中使用它，因此也可以在Android / Chrome Webview和Safari WebView中使用。

代码示例：

只需添加CSS属性：

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'output/no_bg_out.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf58.42.100
  Duration: 00:02:11.04, start: 0.000000, bitrate: 221 kb/s
    Stream #0:0(eng): Video: h264 (High 4:4:4 Predictive) (avc1 / 0x31637661), yuv444p, 1920x1080, 145 kb/s, 25 fps, 25 tbr, 12800 tbn, 50 tbc (default)
    Metadata:
      handler_name    : VideoHandler
    Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 24000 Hz, mono, fltp, 71 kb/s (default)
    Metadata:
      handler_name    : SoundHandler
Input #1, mp3, from 'media/bg1.mp3':
  Metadata:
    encoder         : Lavf58.42.100
  Duration: 00:34:32.69, start: 0.023021, bitrate: 128 kb/s
    Stream #1:0: Audio: mp3, 48000 Hz, stereo, fltp, 128 kb/s
    Metadata:
      encoder         : Lavc58.77
Stream mapping:
  Stream #0:1 (aac) -> amerge:in0
  Stream #1:0 (mp3float) -> volume
  Stream #0:0 -> #0:0 (copy)
  amerge -> Stream #0:1 (aac)
Press [q] to stop, [?] for help
[Parsed_amerge_2 @ 000001b99fe46d00] No channel layout for input 1
Output #0, mp4, to 'out.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf58.42.100
    Stream #0:0(eng): Video: h264 (High 4:4:4 Predictive) (avc1 / 0x31637661), yuv444p, 1920x1080, q=2-31, 145 kb/s, 25 fps, 25 tbr, 12800 tbn, 12800 tbc (default)
    Metadata:
      handler_name    : VideoHandler
    Stream #0:1: Audio: aac (LC) (mp4a / 0x6134706D), 24000 Hz, 3.0, fltp, 197 kb/s (default)
    Metadata:
      encoder         : Lavc58.77.101 aac
frame= 3276 fps=706 q=-1.0 Lsize=    5620kB time=00:02:10.92 bitrate= 351.6kbits/s speed=28.2x
video:2328kB audio:3211kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 1.447797%

UI示例1

查看它在此pen中的运行情况，或尝试演示：

backdrop-filter

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

UI示例2

让我们以麦当劳的应用程序为例，因为它色彩丰富。我获取了它的屏幕截图，并将其作为背景添加到我的应用的#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>，我可以看到：?

Answer 12

我一直在使用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。

Answer 13

这可能对你有所帮助!!

This Dynamically changes the background just IOS does

.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;
}

Answer 14

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

基本上我所做的是：在触发器上克隆/删除整个背景（应该模糊的）到具有不模糊内容的容器（如果它不是全宽度，可选地，隐藏溢出）并正确定位它。警告是在窗口调整大小模糊div将在位置方面不匹配原始，但这可以通过一些关于窗口调整大小功能来解决（老实说，我现在不能被打扰）。

我非常感谢您对此解决方案的看法！

由于

这是fiddle，未在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>

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

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

14 个答案:

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

好消息

代码示例：

UI示例1

UI示例2