0

按照 Traversy Media ( https://youtu.be/gYzHS-n2gqU )的这个 yt 教程设置我的网站投资组合网站。我想把菜单（它只是透明的）变成一个简单地对它下面的东西应用模糊的菜单。

我试过输入 filter: blur(5px); 以及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/ 创建的投资组合网站上看到正在运行的菜单代码。它仍在建设中，所以请不要因为它而对我发火，哈哈。

现在，当我单击右上角的菜单按钮时，它只是一个小的透明覆盖。我上面提供的代码仅适用于覆盖的右半部分。非常感谢您提前提供的所有帮助！

4

1 回答 1

0

background -filter CSS 属性允许您将图形效果（例如模糊或颜色转换）应用到元素后面的区域。请注意，它仍然是一个实验属性：

  • Chrome、Opera、Chrome for Android：启用“实验性 Web 平台功能”后支持
  • IE、火狐：不支持

我建议您使用一个简单的过滤器CSS 属性来应用您想要的模糊效果。

于 2019-01-11T19:35:20.610 回答