Как использовать CSS (и JavaScript?) Для создания размытого, «матового» фона?

Я пытаюсь создать стиль iOS 7 с использованием HTML5, CSS3 и JavaScript, который может работать в браузерах 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 пикселей по горизонтали#main-view.

Если CSS был изменен, чтобы быть#partial-overlay { width: 20px; height: 100%; ...} тогда мне нужно применить-webkit-filter: blur(5px) к первым 20px по вертикали.

Очевидное решение состоит в том, чтобы использовать javascript, чтобы сделать клон#main-view, установленoverflow: hidden а затем измените ширину / высоту в зависимости от ситуации, но мне кажется, что это сложно обобщить на более сложные страницы / структуры CSS.

Есть ли лучший способ добиться этого с минимальным ударом по производительности и максимальной обобщаемостью?

РЕДАКТИРОВАТЬВот пример того, чего я пытаюсь достичь:

Ответы на вопрос(8)

Ваш ответ на вопрос