Как превратить фон наложения меню в размытое (или «матовое стекло») того, что оно скрывает? - PullRequest
Новая
       36

Как превратить фон наложения меню в размытое (или «матовое стекло») того, что оно скрывает?

0 голосов
/ 11 января 2019

Настройка сайта-портфолио моего веб-сайта, следуя этому руководству yt от Traversy Media (https://youtu.be/gYzHS-n2gqU).) Я хочу превратить меню (которое просто прозрачно) в то, которое просто накладывает размытие на то, что под ним.

Я попытался ввести фильтр: размытие (5 пикселей); и все виды комбинаций этого в CSS, но это никогда не работает: (

// Menu Overlay
.menu {
  position: fixed;
  top: 0;
  width: 100%;
  opacity: 1; //this is where you control the opacity of the menu. 1 = opaque, 0 = transparent
  visibility: hidden;

  &.show {
    visibility: visible;
  }

  &-branding,
  &-nav {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    float: left;
    width: 50%;
    height: 100vh;
    overflow: hidden;
  }

  &-nav {
    margin: 0;
    padding: 0;
    /*background: darken($primary-color, 5);*/
    background: transparentize(
      $color: darken($primary-color, 5),
      $amount: 0.05
    );
    list-style: none;
    transform: translate3d(0, -100%, 0);
    @include easeOut;

    &.show {
      // Slide in from top
      transform: translate3d(0, 0, 0);
    }
  }

Вы можете увидеть код меню в действии на сайте портфолио, который я создал на mashal.co/ Он все еще находится в стадии разработки, так что не жгите меня слишком сильно, ха-ха.

Прямо сейчас, все это незначительное прозрачное наложение, когда я нажимаю кнопку меню в правом верхнем углу. приведенный выше код предназначен только для правой половины оверлея. Большое спасибо за любую помощь заранее!

1 Ответ

0 голосов
/ 11 января 2019

CSS-свойство background-filter позволяет применять графические эффекты, такие как размытие или смещение цвета, к области позади элемента. Обратите внимание, что это все еще экспериментальное свойство:

  • Chrome, Opera, Chrome для Android: поддерживается после включения «Экспериментальных возможностей веб-платформы»
  • IE, Firefox: не поддерживается

Я бы посоветовал вам поиграться с простым фильтром CSS-свойством, чтобы применить желаемое размытие.

...