Как применить эффект размытия к панели навигации в css

Question

Я хочу создать панель навигации, аналогичную той, которая есть на веб-сайте Apple в настоящее время все, что я могу найти, это как применить размытие к изображениям, но я хочу, чтобы размытие применялось ко всему, что находится за панелью навигации

Я пробовал использовать фильтр svg, но он применяет размытие к содержимому navbar не на том, что за ним

<style>
  .container {
    height: 100vh;
    width: 100vw;
  }
  .blur {
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
    -webkit-filter: url(#blur-filter);
    filter: url(#blur-filter);
    -webkit-filter: blur(3px);
    filter: blur(3px);
  }
  .blur-svg {
    display: none;
  }
  .navBar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1;
    background-color: rgba(20, 20, 20, 0.2);
  }
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="blur-svg">
  <defs>
    <filter id="blur-filter">
      <feGaussianBlur stdDeviation="3"></feGaussianBlur>
    </filter>
  </defs>
</svg>
<div class="navBar blur">test</div>
<div class="container">
  <h3>Example</h3>
  <p>This example shows the effect.</p>
</div>

Answer 1

Используйте для этого свойство backdrop-filter или используйте тривиальный способ использования двух div (см. Фильтрация фона с фоновым фильтром и без него

Для Пример:

.foreground {
 backdrop-filter: blur(0.8);
} 

Примечание: здесь нет полной поддержки браузером.

Один трюк, которым я хочу поделиться здесь , поскольку вы хотите добиться того же стиля, что и на веб-сайте Apple, просто воспользуйтесь Консолью разработчика. Нажмите CTRL + SHIFT + I и посмотрите, как Apple применила CSS для панели навигации. Таким образом вы сможете узнать новое и добиться того, что вы ищете :)