Question

我想在此演示中重新创建行为，除非标题“暴露”，否则标题背景是透明的。

https://www.webcomponents.org/element/polymerelements/app-layout/v2.1.1/demo/app-header/demo/music.html

我已经设置了effects和reveals属性。

<app-header role="navigation" id="header" effects="waterfall" condenses reveals>
  <app-toolbar>
     <a href="/">Home</a>
     <a href="/values">Value Proposition</a>
     <a href="/manufacturers">Manufacturers</a>
     <a href="/our-team">Our Team</a>
  </app-toolbar>
</app-header>

是否有一个CSS选择器，当标题处于显示状态时可以使用白色背景，否则可以透明？

即滚动位置<30像素时为透明，滚动位置> = 30像素时为白色。

文档指出app-header 有两个背景层，当标题压缩或可滚动元素滚动到顶部时，可用于样式设置，但我没有看到在哪里/如何选择它们。

设置

app-header {
  background: rgba(255,255,255,0);
  --app-header-background-front-layer: {
    background: rgba(255,255,255,1);
  };
  --app-header-background-rear-layer: {
    background: rgba(255,255,255,0);
  };
}

没有效果。

Answer 1

仅当滚动位置位于顶部时，链接演示中的标题才淡出背景。要启用它，请将fade-background添加到<app-header>.effects并使用--app-header-background-rear-layer CSS属性将背景色设置为在显示滚动条时可见：

<style>
  app-header {
    @apply --layout-fixed-top;
    --app-header-background-rear-layer: {
      background-color: #fff;
    };
  }
</style>
<app-header effects="fade-background" ...></app-header>

请注意，--app-header-background-front-layer CSS属性未用于此效果。

demo

仅在标头“露出”聚合物时如何具有背景色

1 个答案: