带有背景和可滚动离子内容的透明/透明标题？

Question

这可能很长。我目前正在构建一个Ionic应用程序，我决定尝试清除标题。这是我试图在整个应用中实现的外观：

看起来不错，我设法让它运转起来。问题是，由于标题位于具有背景的ion-content之上，因此当我滚动ion-content时会发生这种情况：

在透明标题下可以看到应该不在视图中的滚动内容。有没有办法让它看起来像在标题下面，但没有它可见？就像看起来标题是纯色一样。

我的一个选择是在标题上获得类似的背景并设置样式，使看起来有点透明，但最终会注意到它们是不同的图像。

标题和背景具有以下规则：

.clear-header{
    background: rgba(255,255,255,0.10) !important;
    h1{color: $light;};
    .title{ color: $light};
    border-bottom-width: 0;
}

.blur-background { 
    background-size: cover;
    background-image: url([url of image]);
}

谢谢！