css - 如何仅当标题为 "revealed" polymer 时才具有背景颜色

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