blocks|key|188482|text|不幸的是，没有很好的方法来做到这一点，因为你已经知道你需要一个主div的副本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188483|<div+class="wrapper">
+++<div+class="overlay"></div>
+++<div+id="main-copy"></div>
</div>|code-block|syntax|javascript|188484|叠加将推动包装器的宽度，而主副本将在模糊的背景中。显然，如果main-copy中的内容很复杂，就会出现性能问题。|188485|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Unfortunately there is no nice way of doing this, as you figured out you will need a copy of the main div:</p>

<pre><code>&lt;div class="wrapper"&gt;
   &lt;div class="overlay"&gt;&lt;/div&gt;
   &lt;div id="main-copy"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Overlay will push the wrapper width around while, main-copy will be in the background with blur. Obviously there will be performance issues if the content in main-copy is complex.</p>


blocks|key|3015712|text|http://thiv.net/frost|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3015713|我所做的活样本(更新后看起来就像上图)|3015714|代码：|3015715|<style>
++#partial-overlay+{
++++width:+100%25;
++++height:+45px;
++++background:+#ffffff;+/*+TODO+frost+*/
++++-webkit-opacity:0.70;
++++-webkit-filter:+blur(5px);
++++position:+absolute;
++++top:+20px;
++++left:+0px;
++++z-index:5;
++}
++#main-view
++{
+++position:+fixed;
+++top:+20px;
+++left:+80px;
+++z-index:-1;
++}
</style>
<div+id="main-view">
++<div+style="width:+50px;+height:+50px;+background:+#f00;+position:fixed;+left:10px;+top:+40px;+-webkit-filter:+blur(2px);+"></div>
++++<div+style="width:+80px;+height:+60px;+background:+#fff;+position:fixed;+left:0px;+top:+66px;+-webkit-filter:+blur(5px);"></div>
++++<div+style="width:+50px;+height:+30px;+background:+#f00;+position:fixed;+left:10px;+top:+60px;"></div>
++<p+style="font-family:Sans,+Arial,+Verdana;">
++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
++</p>
</div>
<div+id="partial-overlay">

</div>|code-block|syntax|javascript|3015716|我让它看起来比它需要的更漂亮一点，但它是有效的！|3015717|entityMap|0|LINK|mutability|MUTABLE|url^0|0|L|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|4]]]]

<p><a href="http://thiv.net/frost" rel="nofollow">http://thiv.net/frost</a> </p>

<p>Live sample of what I did   ( and updated to look just like the image above )</p>

<p>Code:</p>

<pre><code>&lt;style&gt;
  #partial-overlay {
    width: 100%;
    height: 45px;
    background: #ffffff; /* TODO frost */
    -webkit-opacity:0.70;
    -webkit-filter: blur(5px);
    position: absolute;
    top: 20px;
    left: 0px;
    z-index:5;
  }
  #main-view
  {
   position: fixed;
   top: 20px;
   left: 80px;
   z-index:-1;
  }
&lt;/style&gt;
&lt;div id="main-view"&gt;
  &lt;div style="width: 50px; height: 50px; background: #f00; position:fixed; left:10px; top: 40px; -webkit-filter: blur(2px); "&gt;&lt;/div&gt;
    &lt;div style="width: 80px; height: 60px; background: #fff; position:fixed; left:0px; top: 66px; -webkit-filter: blur(5px);"&gt;&lt;/div&gt;
    &lt;div style="width: 50px; height: 30px; background: #f00; position:fixed; left:10px; top: 60px;"&gt;&lt;/div&gt;
  &lt;p style="font-family:Sans, Arial, Verdana;"&gt;
  To my left is a red box&lt;br&gt;
  Now there is just text&lt;br&gt;
  Text that goes on for a few pixels &lt;br&gt;
  or even more
  &lt;/p&gt;
&lt;/div&gt;
&lt;div id="partial-overlay"&gt;

&lt;/div&gt;
</code></pre>

<p>I made it look a bit prettier than it needs to be, but It works!</p>


blocks|key|185720|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|185721|有没有更好的方法来实现这一点，同时将性能影响降到最低，并最大限度地提高泛化能力？|blockquote|185722|185723|185724|这个问题的答案是no。|offset|length|style|BOLD|185725|原因是，为了做你想做的事情，你需要直接访问用于浏览器窗口的位图，以提取或操作你想要模糊的区域中的像素(我希望，浏览器中的"aero“看起来会非常整洁。)或者一个过滤器，它作用于所应用的元素后面的元素(或者可以为其设置一个限制区域)。|185726|由于没有本机支持(除了画布和扩展API，或者从html+->生成画布图像的库相对较慢)，这将需要使用技巧(图像，分割div等)来完成。不管是哪种情况。|185727|如果你把页面中的所有东西都放在画布上，你可以做很多有趣的事情，但你也需要自己进行布局、更新、过滤等等，因此你就不会回到没有优化的地方，因为Javascript比原生的慢(更不用说它容易出错)。|185728|直到浏览器允许你抓取窗口的一部分作为画布(从不？因为这将要求页面上的所有内容都是同源的，或者具有设置了特殊接受标头的内容)，因此别无选择，只能变戏法。|185729|更新|185730|作为一个演示，您可以使用html2canvas等，但必须使用折衷(->慢性能)-演示是粗糙的，实验性的，需要调整才能很好地工作-但仅用于演示：|185731|http://jsfiddle.net/AbdiasSoftware/RCaLR/|185732|结果：|185733|​|185734|📷|atomic|185735|185736|获取部分背景的广义函数：|185737|getBlurredBG(x,+y,+width,+height,+id);|code-block|syntax|javascript|185738|使用html2canvas获取部分窗口：|185739|function+getBlurredBG(x,+y,+w,+h,+id)+{

++++html2canvas(document.body,+{
++++++++onrendered:+function+(canvas)+{
++++++++++++process(canvas,+x,+y,+w,+h,+id);
++++++++},
++++++++width:+(x+%2B+w),
++++++++height:+(y+%2B+h)
++++});
}|185740|处理内容：|185741|function+process(canvas,+x,+y,+w,+h,+id)+{

++++//create+new+canvas+to+enable+clipping
++++//As+html2canvas+returns+a+canvas+from+0,0+to+width+and+height
++++//we+need+to+clip+it.
++++var+ocanvas+=+document.createElement('canvas');
++++ocanvas.width+=+w;
++++ocanvas.height+=+h;
++++ocanvas.style.left+=+x+%2B+'px';
++++ocanvas.style.top+=+y+%2B+'px';
++++ocanvas.style.position+=+'absolute';
++++ocanvas.id+=+id;

++++var+ctx+=+ocanvas.getContext('2d');
++++ctx.drawImage(canvas,+x,+y,+w,+h,
++++++++++++++++++++++++++0,+0,+w,+h);

++++stackBlurCanvasRGB(ocanvas,+x,+y,+w,+h,+28)
++++lighten(ocanvas);

++++ctx.fillStyle+=+'rgba(255,255,255,0.5)';
++++ctx.fillRect(x,+y,+w,+h);

++++ctx.fillStyle+=+'#999';
++++ctx.font+=+'32px+arial';
++++ctx.fillText("Partial+overlay+content",+10,+60);

++++document.body.appendChild(ocanvas);
}|185742|entityMap|0|LINK|mutability|MUTABLE|url|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/041caea69e275c4d5df188f7c04fbe84.png|imageAlt^0|0|0|0|0|8|2|0|0|0|0|0|0|2|0|0|0|15|0|0|0|0|0|1|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|1Z|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|20|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|21|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|22|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|23|7|@$H|24|I|25|J|K]]|8|@]|9|$]]|$1|L|3|M|4|5|6|26|7|@]|8|@]|9|$]]|$1|N|3|O|4|5|6|27|7|@]|8|@]|9|$]]|$1|P|3|Q|4|5|6|28|7|@]|8|@]|9|$]]|$1|R|3|S|4|5|6|29|7|@]|8|@]|9|$]]|$1|T|3|U|4|5|6|2A|7|@$H|2B|I|2C|J|K]]|8|@]|9|$]]|$1|V|3|W|4|5|6|2D|7|@]|8|@]|9|$]]|$1|X|3|Y|4|5|6|2E|7|@]|8|@$H|2F|I|2G|1|2H]]|9|$]]|$1|Z|3|10|4|5|6|2I|7|@]|8|@]|9|$]]|$1|11|3|12|4|5|6|2J|7|@]|8|@]|9|$]]|$1|13|3|14|4|15|6|2K|7|@]|8|@$H|2L|I|2M|1|2N]]|9|$]]|$1|16|3|12|4|5|6|2O|7|@]|8|@]|9|$]]|$1|17|3|18|4|5|6|2P|7|@]|8|@]|9|$]]|$1|19|3|1A|4|1B|6|2Q|7|@]|8|@]|9|$1C|1D]]|$1|1E|3|1F|4|5|6|2R|7|@]|8|@]|9|$]]|$1|1G|3|1H|4|1B|6|2S|7|@]|8|@]|9|$1C|1D]]|$1|1I|3|1J|4|5|6|2T|7|@]|8|@]|9|$]]|$1|1K|3|1L|4|1B|6|2U|7|@]|8|@]|9|$1C|1D]]|$1|1M|3|-4|4|5|6|2V|7|@]|8|@]|9|$]]]|1N|$1O|$4|1P|1Q|1R|9|$1S|Y]]|1T|$4|1U|1Q|1V|9|$1W|1X|1Y|-4]]]]

<blockquote>
  <p>Is there a better way to achieve this with minimal performance hit and
  maximal generalizability?</p>
</blockquote>

<p>The answer to this is <strong>no</strong>.</p>

<p>The reason is that in order to do what you want you would need direct access to the bitmap used for the browser window to extract or manipulate the pixels in the area you want to blur (I wish, "aero" in a browser could look pretty neat..) or a filter that works on the elements behind the one you apply it to (or can have a limiting region set to it).</p>

<p>As there is no native support to do this (besides canvas and extension API, or a library that generate canvas image from the html -> relatively slow) this will need to be done with trickery (images, splitting divs etc.) in either case.</p>

<p>If you made everything in your page on a canvas you could do a lot of interesting things, but you would also need to perform layout, update, filtering etc. yourselves and therefor you would be back no non-optimized as Javascript is slower than native (not to mention it would be error prone).</p>

<p>Until browsers allow you to grab a section of the window as a canvas (never? as that would require everything on that page to be same-origin or have content with special accept headers set) there is no way around but to do tricks.</p>

<p><strong>Update</strong></p>

<p>As an demonstration that you can do it by using html2canvas etc, but having to use compromises (-> slow performance) - the demo is rough, experimental and needs tweaks to work well - but for the sake of demo only:<br>
<a href="http://jsfiddle.net/AbdiasSoftware/RCaLR/" rel="noreferrer">http://jsfiddle.net/AbdiasSoftware/RCaLR/</a></p>

<p>Result:</p>

<p><img src="https://i.stack.imgur.com/i0SUs.png" alt="enter image description here"></p>

<p>Generalized function to grab part of background:</p>

<pre><code>getBlurredBG(x, y, width, height, id);
</code></pre>

<p>Get part of window using html2canvas:</p>

<pre><code>function getBlurredBG(x, y, w, h, id) {

    html2canvas(document.body, {
        onrendered: function (canvas) {
            process(canvas, x, y, w, h, id);
        },
        width: (x + w),
        height: (y + h)
    });
}
</code></pre>

<p>Process the content:</p>

<pre><code>function process(canvas, x, y, w, h, id) {

    //create new canvas to enable clipping
    //As html2canvas returns a canvas from 0,0 to width and height
    //we need to clip it.
    var ocanvas = document.createElement('canvas');
    ocanvas.width = w;
    ocanvas.height = h;
    ocanvas.style.left = x + 'px';
    ocanvas.style.top = y + 'px';
    ocanvas.style.position = 'absolute';
    ocanvas.id = id;

    var ctx = ocanvas.getContext('2d');
    ctx.drawImage(canvas, x, y, w, h,
                          0, 0, w, h);

    stackBlurCanvasRGB(ocanvas, x, y, w, h, 28)
    lighten(ocanvas);

    ctx.fillStyle = 'rgba(255,255,255,0.5)';
    ctx.fillRect(x, y, w, h);

    ctx.fillStyle = '#999';
    ctx.font = '32px arial';
    ctx.fillText("Partial overlay content", 10, 60);

    document.body.appendChild(ocanvas);
}
</code></pre>


blocks|key|184254|text|谢谢你的启发。它将我带到了这个canvas+plugin，它可以做到这一点|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|184255|新的和改进的：+，现在可重新调整大小/流体。|style|BOLD|184256|JS|184257|$(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();
++++});
});|code-block|syntax|javascript|184258|CSS|184259|#main-view+{
++++width:75%25;
++++height:50%25;
++++box-sizing:+border-box;
++++margin:8px;
}
#partial-overlay+{
++++display:none;
++++width:+100%25;
++++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%25;
++++background:#fff;
++++top:0;
++++left:0;
++++position:absolute;
}
#contain+{
++++height:20px;
++++width:100%25;
++++overflow:hidden;
++++position:absolute;
++++top:0;
++++left:0;
}
svg+{
++++height:0;
++++width:0;
}|184260|HTML|184261|<div+id="main-view">
++++<div+style="width:+10%25;+height:+20%25;+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>|184262|我把它放在一个click函数中，因为我认为这是最有可能的用例。它在文档准备好的情况下也会工作得很好。|184263|尽管画布表示不会是像素完美的，但我认为在大多数情况下这并不重要，因为它是模糊的。|184264|更新：根据请求，现在可以重新调整大小。我还将封面div移到了JS中，并为Firefox添加了一个svg回退。调整大小需要在每次调整大小时重新绘制画布，所以我将其设置为在您调整大小时隐藏画布、覆盖等，然后在调整大小停止时替换它。|184265|entityMap|0|LINK|mutability|MUTABLE|url|http://html2canvas.hertzen.com/examples.html^0|F|D|0|0|0|7|0|0|0|0|0|0|0|0|0|0|3|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|6|7|1E|8|@$A|1F|B|1G|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1H|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1I|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1J|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1K|8|@]|9|@]|C|$M|N]]|$1|S|3|T|5|6|7|1L|8|@]|9|@]|C|$]]|$1|U|3|V|5|L|7|1M|8|@]|9|@]|C|$M|N]]|$1|W|3|X|5|6|7|1N|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|6|7|1O|8|@]|9|@]|C|$]]|$1|10|3|11|5|6|7|1P|8|@$A|1Q|B|1R|F|G]]|9|@]|C|$]]|$1|12|3|-4|5|6|7|1S|8|@]|9|@]|C|$]]]|13|$14|$5|15|16|17|C|$18|19]]]]

<p>Thanks for the inspiration... It led me to this <a href="http://html2canvas.hertzen.com/examples.html" rel="noreferrer">canvas plugin</a> which does the trick</p>

<p><strong>New and Improved: <a href="http://jsfiddle.net/apaul34208/TfWs3/79/" rel="noreferrer">-webkit- and Firefox Working Example</a></strong>, now re-sizable/fluid.</p>

<p>JS</p>

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

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

    $('#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 &amp;&amp; clearTimeout(timer);
            timer = setTimeout(onResize, 50);
        });

    });

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

<p>CSS</p>

<pre><code>#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;
}
</code></pre>

<p>HTML</p>

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

<p>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.</p>

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

<p><strong>Update:</strong> 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. </p>


blocks|key|186471|text|它的支持仍然非常有限(只有Firefox)，但一种获得它的方法可能是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|186472|Firefox+only+demo|offset|length|186473|CSS非常简单：|186474|#partial-overlay+{
++++width:400px;+
++++height:100px;+
++++background:+-moz-element(#main-view);
++++top:+0px;
++++left:+200px;
++++position:+absolute;
++++opacity:+0.3;
}|code-block|syntax|javascript|186475|关键是用作部分覆盖主视图元素的背景。|186476|此演示仅使用不透明度，因为滤镜在Firefox中不可用。|186477|背景的元素属性已经得到了w3c的批准，因此它可能会在将来的某个时候显示在webkit中|186478|在演示中，部分覆盖已移至右侧，以更清楚地说明什么是什么|186479|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/vals/nD2dq/^0|0|0|H|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>It has still very limited suport (only Firefox) but one way to get it could be this:</p>
<h2><a href="http://jsfiddle.net/vals/nD2dq/" rel="nofollow noreferrer">Firefox only demo</a></h2>
<p>The CSS is quite simple:</p>
<pre><code>#partial-overlay {
    width:400px; 
    height:100px; 
    background: -moz-element(#main-view);
    top: 0px;
    left: 200px;
    position: absolute;
    opacity: 0.3;
}
</code></pre>
<p>and the key is to use as background for partial overlay the main-view element.</p>
<p>This demo uses only opacity because filters are not availables for Firefox.</p>
<p>The element property for the background has been approved by w3c, so it could show sometime in the future in webkit</p>
<p>In the demo partial-overlay has been shift to the right to make more clear what is what</p>


blocks|key|185772|text|基本上你可以有一个覆盖占位符，你可以在其中复制主要内容并同步两个div的滚动，然后只在覆盖上应用css模糊过滤器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|185773|一个简单的javascript就可以了：|185774|$(document).ready(function(){
++$('.overlay').append(+$('.content').html()+);
++$('.content').on('scroll',+function(){
++++$('.overlay').scrollTop($(this).scrollTop());
++});
});|code-block|syntax|javascript|185775|对于CSS：|185776|.overlay+{
++++overflow:hidden;
++++-webkit-filter:+blur(.25em);
++++background:#fff;
}|185777|我为您整理了一个工作示例(仅限webkit)：|185778|http://jsfiddle.net/kmxD3/1/|offset|length|185779|玩得开心！:)|185780|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|S|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@$Q|18|R|19|1|1A]]|A|$]]|$1|S|3|T|5|6|7|1B|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|P]]]]

<p>Basically you could have a overlay placeholder where you duplicate the main content and sync the scrolling of both divs, than apply css blur filter on the overlay only.</p>

<p>A simple javascript will do:</p>

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

<p>And for the CSS:</p>

<pre><code>.overlay {
    overflow:hidden;
    -webkit-filter: blur(.25em);
    background:#fff;
}
</code></pre>

<p>I put together a working example for you (webkit only):</p>

<p><a href="http://jsfiddle.net/kmxD3/1/" rel="noreferrer">http://jsfiddle.net/kmxD3/1/</a></p>

<p>Have fun! :)</p>


blocks|key|3016023|text|最近，一个新的-webkit-backdrop-filter。目前Safari+9.0和Chrome都支持这一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3016024|演示：|3016025|​|3016026|#blurred+{
++-webkit-backdrop-filter:+blur(10px);
++width:+200px;
++height:+100px;
++position:+fixed;
++top:+50px;
++left:+50px;
++border:+3px+solid+white;
}|code-block|syntax|javascript|3016027|<img+src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">

<div+id="blurred">+Blurred+</div>|3016028|3016029|目前只支持Safari。Chrome和Opera都有这方面的优势。|3016030|注意:SVG+-webkit-backdrop-filter目前还没有很好的支持，所以现在如果你想获得这种效果，最好的方法就是使用的feGaussianBlur|BOLD|3016031|entityMap^0|7|N|0|0|0|0|0|0|0|0|1T|7|N|1U|E|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|12|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|15|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|16|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|17|8|@$9|18|A|19|B|V]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|X|$]]

<p>Recently, a new <code>-webkit-backdrop-filter</code>. This is currently supported in Safari 9.0, and Chrome behind a flag.</p>

<p>Demo:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#blurred {
  -webkit-backdrop-filter: blur(10px);
  width: 200px;
  height: 100px;
  position: fixed;
  top: 50px;
  left: 50px;
  border: 3px solid white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg"&gt;

&lt;div id="blurred"&gt; Blurred &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Support right now is only Safari. Chrome and Opera have this under a flag.</p>

<p><strong>Note:</strong> Today <code>-webkit-backdrop-filter</code> still doesn't have great support so for now if you want to get this effect, the best way is using SVG's <code>feGaussianBlur</code></p>


blocks|key|186516|text|我在没有backdrop-filter的情况下做了一些css技巧，因为chrome默认不支持它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|186517|我用sass编写的原始代码：|BOLD|186518|​|186519|$(()=>{
++let+sdm+=+$('.some-draggable-modal');
++sdm.center().draggable();
});

jQuery.fn.center+=+function+()+{
++++this.css("position","absolute");
++++this.css("top",+Math.max(0,+(($(window).height()+-+$(this).outerHeight())+/+2)+%2B+
++++++++++++++++++++++++++++++++++++++++++++++++$(window).scrollTop())+%2B+"px");
++++this.css("left",+Math.max(0,+(($(window).width()+-+$(this).outerWidth())+/+2)+%2B+
++++++++++++++++++++++++++++++++++++++++++++++++$(window).scrollLeft())+%2B+"px");
++++return+this;
};|code-block|syntax|javascript|186520|body+{
++background:+-webkit-repeating-linear-gradient(135deg,+#fff,+#fff+25px,+#e2edc1+25px,+#e2edc1+50px)+fixed;
++background:+repeating-linear-gradient(-45deg,+#fff,+#fff+25px,+#e2edc1+25px,+#e2edc1+50px)+fixed;
++background-attachment:+fixed;
++background-size:+cover;
}
html:before,
body:before+{
++content:+"";
++display:+block;
++position:+absolute;
++top:+0;
++left:+0;
++right:+0;
++bottom:+0;
++background:+rgba(0,+0,+0,+0.3);
}
html+.some-draggable-modal,
body+.some-draggable-modal+{
++width:+150px;
++height:+150px;
++border:+1px+solid+lime;
++display:+-webkit-box;
++display:+-ms-flexbox;
++display:+flex;
++place-content:+center;
++-webkit-box-orient:+vertical;
++-webkit-box-direction:+normal;
++++++-ms-flex-direction:+column;
++++++++++flex-direction:+column;
++text-align:+center;
++border-radius:+6px;
++cursor:+move;
++position:+relative;
++overflow:+hidden;
}
html+.some-draggable-modal+.title,
body+.some-draggable-modal+.title+{
++position:+relative;
++z-index:+1;
++color:+black;
}
html+.some-draggable-modal:before,
body+.some-draggable-modal:before+{
++content:+"";
++position:+absolute;
++top:+0;
++left:+0;
++right:+0;
++bottom:+0;
++background:+-webkit-repeating-linear-gradient(135deg,+#fff,+#fff+25px,+#e2edc1+25px,+#e2edc1+50px)+fixed;
++background:+repeating-linear-gradient(-45deg,+#fff,+#fff+25px,+#e2edc1+25px,+#e2edc1+50px)+fixed;
++background-attachment:+fixed;
++background-size:+cover;
}
html+.some-draggable-modal:hover:before,
body+.some-draggable-modal:hover:before+{
++-webkit-filter:+blur(2px);
++++++++++filter:+blur(2px);
}
html+.some-draggable-modal:hover:after,
body+.some-draggable-modal:hover:after+{
++content:+"filter:+blur(2px)";
++position:+absolute;
++left:+0;
++right:+0;
++bottom:+10px;
++color:+green;
}|186521|<script+src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script+src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div+class="some-draggable-modal">
++<span+class="title">You+can+drag+me+:)</span>
</div>|186522|186523|entityMap^0|4|F|0|D|1|0|0|1|0|0|0|0|0|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|12|8|@$9|13|A|14|B|H]]|D|@]|E|$]]|$1|K|3|L|5|M|7|15|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|M|7|16|8|@]|D|@]|E|$N|O]]|$1|R|3|S|5|M|7|17|8|@]|D|@]|E|$N|O]]|$1|T|3|J|5|6|7|18|8|@$9|19|A|1A|B|H]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|V|$]]

<p>I've made some css-trick without <code>backdrop-filter</code> because chrome doesn't support it by default</p>

<p>My original code <strong>with sass</strong>: <strong><a href="https://codepen.io/mixal_bl4/pen/EwPMWo" rel="nofollow noreferrer">https://codepen.io/mixal_bl4/pen/EwPMWo</a></strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(()=&gt;{
  let sdm = $('.some-draggable-modal');
  sdm.center().draggable();
});

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
};</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background: -webkit-repeating-linear-gradient(135deg, #fff, #fff 25px, #e2edc1 25px, #e2edc1 50px) fixed;
  background: repeating-linear-gradient(-45deg, #fff, #fff 25px, #e2edc1 25px, #e2edc1 50px) fixed;
  background-attachment: fixed;
  background-size: cover;
}
html:before,
body:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}
html .some-draggable-modal,
body .some-draggable-modal {
  width: 150px;
  height: 150px;
  border: 1px solid lime;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  place-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  border-radius: 6px;
  cursor: move;
  position: relative;
  overflow: hidden;
}
html .some-draggable-modal .title,
body .some-draggable-modal .title {
  position: relative;
  z-index: 1;
  color: black;
}
html .some-draggable-modal:before,
body .some-draggable-modal:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: -webkit-repeating-linear-gradient(135deg, #fff, #fff 25px, #e2edc1 25px, #e2edc1 50px) fixed;
  background: repeating-linear-gradient(-45deg, #fff, #fff 25px, #e2edc1 25px, #e2edc1 50px) fixed;
  background-attachment: fixed;
  background-size: cover;
}
html .some-draggable-modal:hover:before,
body .some-draggable-modal:hover:before {
  -webkit-filter: blur(2px);
          filter: blur(2px);
}
html .some-draggable-modal:hover:after,
body .some-draggable-modal:hover:after {
  content: "filter: blur(2px)";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  color: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;

&lt;div class="some-draggable-modal"&gt;
  &lt;span class="title"&gt;You can drag me :)&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|186539|text|CSS+only解决方案：backdrop-filter:+blur(4px);|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|186540|entityMap^0|D|R|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>CSS only solution:
<code>backdrop-filter: blur(4px);</code></p>


blocks|key|184412|text|现在可以使用backdrop-filter+CSS属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|184413|最新版本的Chrome、Opera和Edge默认支持，而Safari和Legacy+Edge支持带有-webkit-前缀的版本，如果layout.css.backdrop-filter.enabled首选项设置为true，则火狐支持无前缀版本。|184414|所以你的CSS变成了：|184415|#partial-overlay+{
++++width:+100%25;
++++height:+20px;
++++background:+rgba(255,+255,+255,+.2);+/*+TODO+frost+*/
++++position:+fixed;
++++top:+0;
++++left:+0;
++++
++++backdrop-filter:+blur(10px);
++++-webkit-backdrop-filter:+blur(10px);
}|code-block|syntax|javascript|184416|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter^0|6|F|6|F|0|0|1E|8|1U|Y|2Y|4|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|19|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1A|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>You can now use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter" rel="nofollow noreferrer"><code>backdrop-filter</code></a> CSS property.</p>
<p>Latest versions of Chrome, Opera and Edge support it by default, while Safari and Legacy Edge support it with the <code>-webkit-</code> prefix, and Firefox supports the unprefixed version if the <code>layout.css.backdrop-filter.enabled</code> preference is set to <code>true</code>.</p>
<p>So your CSS becomes:</p>
<pre class="lang-css prettyprint-override"><code>#partial-overlay {
    width: 100%;
    height: 20px;
    background: rgba(255, 255, 255, .2); /* TODO frost */
    position: fixed;
    top: 0;
    left: 0;
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
</code></pre>


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

<p>Technically, given the following HTML:</p>

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

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

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

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

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

<p><strong>EDIT</strong>: Here is an example of what I'm trying to achieve:
<img src="https://i.stack.imgur.com/cyKkw.png" alt="Mockup"></p>


How to use CSS (and JavaScript?) to create a blurred, "frosted" background?

jQuery

HTML5

我正在尝试用HTML5，CSS3和JavaScript创建一个iOS 7风格的磨砂外观，可以在webkit浏览器上运行。从技术上讲，给定以下HTML：<style>  #partial-overlay {    width: 100%;    height: 20px;    background: rgba(255,...

问如何使用CSS (和JavaScript?)来创造一个模糊的，“磨砂的”背景？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS (和JavaScript?)来创造一个模糊的，“磨砂的”背景？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS (和JavaScript?)来创造一个模糊的，“磨砂的”背景？
EN