如何使用CSS（和JavaScript？）创建一个模糊，“磨砂”背景？ [英] How to use CSS (and JavaScript?) to create a blurred, "frosted" background?

问题描述

我尝试用HTML5，CSS3和JavaScript创建一个iOS 7风格的磨砂外观，可以在webkit浏览器上工作。

I'm trying to create an iOS 7 style frosted look with HTML5, CSS3 and JavaScript which can work on webkit browsers.

从技术上讲，

<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）水平到＃main-view 。

I'd like to apply something like a -webkit-filter: blur(5px) to the first 20px horizontally of #main-view.

CSS被修改为＃partial-overlay {width：20px;高度：100％; ...} 然后我需要应用 -webkit-filter：blur（5px）垂直第一个20px。

If the CSS was modified to be #partial-overlay { width: 20px; height: 100%; ...} then I'd need to apply the -webkit-filter: blur(5px) to the first 20px vertically.

显而易见的解决方案是使用javascript来克隆＃main-view ，设置 overflow：hidden 然后根据需要改变宽度/高度，但似乎难以推广到更复杂的页面/ CSS结构。

The obvious solution is to use javascript to make a clone of the #main-view, set overflow: hidden and then change the width/height as appropriate but that seems to me hard to generalize to more complex pages/CSS structures.

有没有更好的方法来实现这个最小的性能命中和最大的可泛化性？

Is there a better way to achieve this with minimal performance hit and maximal generalizability?

EDIT ：这是一个例子，实现：

EDIT: Here is an example of what I'm trying to achieve:

推荐答案

感谢您的灵感...它带我到这个 canvas插件< a>

Thanks for the inspiration... It led me to this canvas plugin which does the trick

新增和改进： - webkit-和Firefox工作示例 ，现在可以调整大小/流畅。

New and Improved: -webkit- and Firefox Working Example, now re-sizable/fluid.

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>

我把它放在一个点击函数中，因为我认为这将是最可能的用例。

I put it in a click function, because I figured it would be the most likely use case. It will work just as well on document ready.

尽管画布表示不是像素完美的，但我认为在大多数情况下它并不重要，因为它的模糊。

Although the canvas representation wont be pixel perfect, I don't think it will really matter in most cases because its being blurred.

更新：根据要求，现在可以调整大小。我也把cover div移动到JS中，并为Firefox添加了一个svg。调整大小需要在每次调整大小时重新绘制画布，因此在调整大小时将其设置为隐藏画布，叠加层等，然后在调整大小时将其替换。

Update: As requested this is now re-sizable. I also moved the cover div into the JS and added an svg fall back for Firefox. The resizing requires the canvas to be redrawn on each re-size, so I set it up to hide the canvas, overlay, etc while you're resizing and then replace it when the re-size stops.

这篇关于如何使用CSS（和JavaScript？）创建一个模糊，“磨砂”背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！