如何使用CSS(和JavaScript?)创建模糊的“结霜”的背景?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (54)

我正在尝试用HTML 5、CSS 3和JavaScript创建一个iOS 7风格的外观,它可以在webkit浏览器上工作。

从技术上讲,给定以下HTML:

<style>
  #partial-overlay {
    width: 100%;
    height: 20px;
    background: rgba(255, 255, 255, .2); /* TODO frost */
    position: fixed;
    top: 0;
    left: 0;
  }
</style>
<div id="main-view">
  <div style="width: 50px; height: 50px; background: #f00"></div>
  To my left is a red box<br>
  Now there is just text<br>
  Text that goes on for a few pixels <br>
  or even more
</div>
<div id="partial-overlay">
  Here is some content
</div>

我想申请一种类似-webkit-filter: blur(5px)的前20 px水平。#main-view...

如果CSS被修改为#partial-overlay { width: 20px; height: 100%; ...}那么我需要应用-webkit-filter: blur(5px)垂直到前20 px。

最明显的解决方案是使用javascript复制#main-view,集overflow: hidden然后适当地更改宽度/高度,但在我看来,这很难推广到更复杂的页面/CSS结构。

有没有更好的方法来实现这一点,以最小的性能命中和最大的通用性?

以下是我正在努力实现的目标的一个例子:

提问于
用户回答回答于

基本上,你可以有一个覆盖占位符,你可以复制主要内容并同步滚动两个div,而不是只在覆盖层上应用CSS模糊滤镜。

一个简单的JavaScript将做到:

$(document).ready(function(){
  $('.overlay').append( $('.content').html() );
  $('.content').on('scroll', function(){
    $('.overlay').scrollTop($(this).scrollTop());
  });
});

而对于CSS:

.overlay {
    overflow:hidden;
    -webkit-filter: blur(.25em);
    background:#fff;
}

我为您制作了一个工作示例(仅限webkit):

http://jsfiddle.net/kmxD3/1/

用户回答回答于

感谢您的灵感......它让我看到了这个布景插件,它可以做到这一点

新增功能和改进功能:-webkit-和Firefox工作示例,现在可重新定义/流畅。

JS

$(document).ready(function () {
    frost = function () {
        var w = $('#main-view').width();
        html2canvas(document.body, {
            onrendered: function (canvas) {
                document.body.appendChild(canvas);
                $('canvas').wrap('<div id="contain" />');
            },
            width: w,
            height: 30
        });
        $('canvas, #partial-overlay, #cover').hide();
        $('#cover').fadeIn('slow', function () {
            $('#partial-overlay').fadeIn('slow');
        });
    };

    $('body').append('<div id="cover"></div><svg id="svg-image-blur"><filter id="blur-effect-1"><feGaussianBlur stdDeviation="2"/></filter></svg>');

    $('#main-view').click(function () {
        frost();
        $('#partial-overlay').addClass('vis');
        $(window).resize(function () {
            $('canvas, #partial-overlay, #cover').hide();
        });

        function onResize() {
            if ($('#partial-overlay').hasClass('vis')) {
                frost();
            }
        }
        var timer;
        $(window).bind('resize', function () {
            timer && clearTimeout(timer);
            timer = setTimeout(onResize, 50);
        });

    });

    $('#partial-overlay').click(function () {
        $('#partial-overlay').removeClass('vis');
        $('canvas, #partial-overlay, #cover').hide();
    });
});

CSS

#main-view {
    width:75%;
    height:50%;
    box-sizing: border-box;
    margin:8px;
}
#partial-overlay {
    display:none;
    width: 100%;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index:99;
    background: rgba(255, 255, 255, 0.2);
    cursor:pointer;
}
canvas {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-filter:blur(5px);
    filter: url(#blur-effect-1);
}
#cover {
    display:none;
    height:19px;
    width:100%;
    background:#fff;
    top:0;
    left:0;
    position:absolute;
}
#contain {
    height:20px;
    width:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}
svg {
    height:0;
    width:0;
}

HTML

<div id="main-view">
    <div style="width: 10%; height: 20%; background: #f00; float: left"></div>To my left is a red box
    <br>Now there is just text
    <br>Text that goes on for a few pixels
    <br>or even more</div>
<div id="partial-overlay">Here is some content</div>

我把它放在一个点击函数中,因为我认为它是最可能的用例。它在文档准备就绪时也会起作用。

尽管画布表现不会像素完美,但我认为它在大多数情况下并不重要,因为它很模糊。

更新:根据要求,现在可以重新调整大小。我还将cover div移入JS中,并为Firefox添加了一个svg后退。调整大小需要在每个重新调整大小时重新绘制画布,所以我将其设置为在调整大小时隐藏画布,覆盖等,然后在重新调整大小时停止替换。

扫码关注云+社区

领取腾讯云代金券