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

Question

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

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

这里的例子=> jsfiddle

Answer 2

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

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

使用：

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

而已。

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

Answer 3

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

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

现场演示

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

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

该技术的关键部分是使用 CSS 区域将内容与布局分开。首先定义一个.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 种子 6
• iOS7（慢且无滚动）

Answer 4

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

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

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

所以，放在一起：

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

这是一个 JS Fiddle，仅限 FX。

Answer 5

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

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

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

Answer 6

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

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

详细信息：A. 基本上，它查看您的内容 div 并在其上调用 cloneNode，因此它创建一个副本，然后将其放置在位于页面顶部的溢出：隐藏标题对象中。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 日，这很容易通过backdrop-filterCSS 属性实现，该属性现在是 Chrome、Safari 和 Edge 中的一个稳定功能。

我希望在我们的 Hybrid 移动应用程序中使用它，因此也可以在 Android/Chrome Webview 和 Safari WebView 中使用。

1. https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
2. https://caniuse.com/#search=backdrop-filter

代码示例：

只需添加 CSS 属性：

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

用户界面示例 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>

用户界面示例 2

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

我想在它上面显示一个带有光泽效果的文本。在它上面的覆盖层上使用backdrop-filter: blur(20px);，我可以看到：

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

这可能会帮助你！

这会动态更改 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;
}

Answer 14

这是我对 jQuery 的看法。解决方案不是通用的，这意味着必须根据实际设计调整一些位置和东西。

基本上我所做的是：在触发器上克隆/删除整个背景（应该模糊的内容）到具有未模糊内容的容器（如果不是全宽，则可以选择隐藏溢出）并将其正确定位。需要注意的是，在调整窗口大小时，模糊的 div 会在位置方面与原始 div 不匹配，但这可以通过一些调整窗口大小的功能来解决（老实说，我现在对此不屑一顾）。

我非常感谢您对此解决方案的意见！

谢谢

这是小提琴，未在 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');
    }
});