如何使用CSS（和JavaScript？）创建模糊的“磨砂”背景？

Question

我正在尝试使用HTML5，CSS3和JavaScript创建可在Webkit浏览器上使用的iOS 7样式磨砂外观。

从技术上讲，给出以下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)对的第一个20px水平应用类似a 的内容#main-view。

如果将CSS修改为，#partial-overlay { width: 20px; height: 100%; ...}则需要将其-webkit-filter: blur(5px)垂直应用于前20px。

显而易见的解决方案是使用javascript来克隆#main-view，设置overflow: hidden，然后适当地更改宽度/高度，但是在我看来，很难将其推广到更复杂的页面/ CSS结构。

有没有更好的方法来实现此目标，而又不会降低性能影响并最大程度地提高了通用性？

Answer 1

-webkit-和Firefox Working Example，现在可调整大小/流畅。JS$(document).ready(function () {&nbsp; &nbsp; frost = function () {&nbsp; &nbsp; &nbsp; &nbsp; var w = $('#main-view').width();&nbsp; &nbsp; &nbsp; &nbsp; html2canvas(document.body, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onrendered: function (canvas) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.body.appendChild(canvas);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('canvas').wrap('<div id="contain" />');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: w,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 30&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $('canvas, #partial-overlay, #cover').hide();&nbsp; &nbsp; &nbsp; &nbsp; $('#cover').fadeIn('slow', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#partial-overlay').fadeIn('slow');&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; };&nbsp; &nbsp; $('body').append('<div id="cover"></div><svg id="svg-image-blur"><filter id="blur-effect-1"><feGaussianBlur stdDeviation="2"/></filter></svg>');&nbsp; &nbsp; $('#main-view').click(function () {&nbsp; &nbsp; &nbsp; &nbsp; frost();&nbsp; &nbsp; &nbsp; &nbsp; $('#partial-overlay').addClass('vis');&nbsp; &nbsp; &nbsp; &nbsp; $(window).resize(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('canvas, #partial-overlay, #cover').hide();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; function onResize() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($('#partial-overlay').hasClass('vis')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; frost();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; var timer;&nbsp; &nbsp; &nbsp; &nbsp; $(window).bind('resize', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timer && clearTimeout(timer);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timer = setTimeout(onResize, 50);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; $('#partial-overlay').click(function () {&nbsp; &nbsp; &nbsp; &nbsp; $('#partial-overlay').removeClass('vis');&nbsp; &nbsp; &nbsp; &nbsp; $('canvas, #partial-overlay, #cover').hide();&nbsp; &nbsp; });});的CSS#main-view {&nbsp; &nbsp; width:75%;&nbsp; &nbsp; height:50%;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; margin:8px;}#partial-overlay {&nbsp; &nbsp; display:none;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 20px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; z-index:99;&nbsp; &nbsp; background: rgba(255, 255, 255, 0.2);&nbsp; &nbsp; cursor:pointer;}canvas {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; -webkit-filter:blur(5px);&nbsp; &nbsp; filter: url(#blur-effect-1);}#cover {&nbsp; &nbsp; display:none;&nbsp; &nbsp; height:19px;&nbsp; &nbsp; width:100%;&nbsp; &nbsp; background:#fff;&nbsp; &nbsp; top:0;&nbsp; &nbsp; left:0;&nbsp; &nbsp; position:absolute;}#contain {&nbsp; &nbsp; height:20px;&nbsp; &nbsp; width:100%;&nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:0;&nbsp; &nbsp; left:0;}svg {&nbsp; &nbsp; height:0;&nbsp; &nbsp; width:0;}的HTML<div id="main-view">&nbsp; &nbsp; <div style="width: 10%; height: 20%; background: #f00; float: left"></div>To my left is a red box&nbsp; &nbsp; <br>Now there is just text&nbsp; &nbsp; <br>Text that goes on for a few pixels&nbsp; &nbsp; <br>or even more</div><div id="partial-overlay">Here is some content</div>我将其放在click函数中，因为我认为这将是最可能的用例。在准备好文档时，它将同样有效。尽管画布表示不会是完美的像素，但我认为在大多数情况下它并不重要，因为其模糊了。更新：根据要求，现在可以调整大小。我还将Cover div移到了JS中，并为Firefox添加了一个svg后备。调整大小要求在每次调整大小时都重新绘制画布，因此我将其设置为在调整大小时隐藏画布，覆盖图等，然后在调整大小停止时替换画布。