使用 `backdrop-filter: blur` 和 `mix-blend-mode`，文本颜色显示不正确

Question

我在article 元素上使用backdrop-filter: blur 来模糊背景图片，并在h1 元素上使用mix-blend-mode: overlay 来获得一些颜色。

我期待下面这样的东西（使用 Sketch 创建的模型），但实际标题总是以灰色阴影出现，而不是预期的不同颜色（使用 Chrome 和 Safari 测试，因为 Firefox 目前还不支持backdrop-filter）。

预期结果（模型）

复制样本

article {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

h1 {
  mix-blend-mode: overlay;
}


/** Other styles **/

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.container {
  width: 100vw;
  height: 100vh;
  background-image: url("https://source.unsplash.com/9IBqihqhuHc");
  background-size: cover;
}

article {
  width: 70%;
  margin-left: 30%;
  height: 100%;
  overflow: scroll;
  padding: 4em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
}

h1 {
  font-size: 3em;
  line-height: 1.1;
  margin: 0;
}

h1 small {
  font-weight: 500;
  font-size: 0.5em;
}

<div class="container">
  <article>
    <h1><small>Augue amet tempus sed cursus</small><br>Lorem ipsum dolor sit amet, consecturer!</h1>
    <p>Tellus urna parturient cras nulla eleifend purus posuere venenatis malesuada, aliquam dui pellentesque eros nisl porta tempor ligula. Metus ligula mauris vestibulum dictumst luctus interdum volutpat tristique, feugiat accumsan tellus senectus aenean
      curae vel facilisis, ad lacus sed imperdiet penatibus dictum habitasse. Eros porta pulvinar posuere ac semper dictumst id, ad taciti convallis curabitur etiam nam. Libero venenatis lacus faucibus per erat ut aenean vestibulum nostra, pulvinar netus
      luctus vel auctor blandit penatibus eleifend nibh donec, tempus ridiculus accumsan fames in est sodales vivamus. Praesent ut tempus parturient integer elit orci porta montes placerat nibh, iaculis cum per ipsum quis nullam diam sit tincidunt duis,
      dictumst aenean netus mattis purus vehicula vestibulum dignissim laoreet. Ipsum nibh nec nisl netus dapibus etiam felis cubilia sociis in convallis, duis tempor bibendum vestibulum hendrerit suscipit leo fringilla mauris vulputate non, mattis aenean
      integer hac orci dolor ligula ornare sem porta. Aliquet tellus integer dis sit inceptos urna amet dui odio consectetur ac et, aenean eros viverra sapien tempus arcu cras rhoncus cubilia cursus nunc, dignissim velit ante conubia congue platea taciti
      sodales volutpat metus diam.</p>
    <p>Sollicitudin convallis penatibus sed nec suspendisse a vel sem, egestas nostra fusce nam curae potenti class, mi neque at facilisi nibh nullam facilisis. Interdum duis hendrerit quam rutrum platea donec purus pharetra egestas, hac aliquam dictum taciti
      varius leo dis sit consequat, auctor magna feugiat urna quisque mauris dolor congue. Natoque fermentum tristique tempus iaculis lacus facilisi, congue placerat torquent ultricies quis, a ridiculus ullamcorper viverra egestas varius, himenaeos scelerisque
      vestibulum nisi. Urna odio nec netus dui sodales non nam id fusce magnis commodo proin placerat pretium, ultrices nostra senectus diam at massa metus habitasse elementum ornare varius aliquam. Cum pharetra sapien faucibus accumsan massa litora,
      duis aptent ullamcorper dis sollicitudin elit, vitae vel quam dictum venenatis. Etiam rutrum iaculis faucibus nec elementum luctus eros eleifend, feugiat posuere nostra congue penatibus ac fames. Pellentesque platea lorem nulla dui libero himenaeos
      inceptos tortor convallis mollis condimentum, ac cum arcu egestas tincidunt ultricies posuere orci nostra dictum, nascetur aliquet tempor sem sodales urna maecenas adipiscing vehicula fermentum.</p>
  </article>
</div>

Answer 1

您将无法仅将h1 与背景混合。要么是所有文章元素。

另一个想法是考虑使用与容器相同的图像应用于 h1 的背景着色：

article {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

h1 {
  background: url("https://source.unsplash.com/9IBqihqhuHc") fixed;
  background-size: cover;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}


/** Other styles **/
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.container {
  height: 100vh;
  background-image: url("https://source.unsplash.com/9IBqihqhuHc");
  background-size: cover;
}

article {
  width: 70%;
  margin-left: auto;
  height: 100%;
  overflow: auto;
  padding: 4em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}

h1 {
  font-size: 3em;
  line-height: 1.1;
  margin: 0;
}

h1 small {
  font-weight: 500;
  font-size: 0.5em;
}

<div class="container">
  <article>
    <h1><small>Augue amet tempus sed cursus</small><br>Lorem ipsum dolor sit amet, consecturer!</h1>
    <p>Tellus urna parturient cras nulla eleifend purus posuere venenatis malesuada, aliquam dui pellentesque eros nisl porta tempor ligula. Metus ligula mauris vestibulum dictumst luctus interdum volutpat tristique, feugiat accumsan tellus senectus aenean
      curae vel facilisis, ad lacus sed imperdiet penatibus dictum habitasse. Eros porta pulvinar posuere ac semper dictumst id, ad taciti convallis curabitur etiam nam. Libero venenatis lacus faucibus per erat ut aenean vestibulum nostra, pulvinar netus
      luctus vel auctor blandit penatibus eleifend nibh donec, tempus ridiculus accumsan fames in est sodales vivamus. Praesent ut tempus parturient integer elit orci porta montes placerat nibh, iaculis cum per ipsum quis nullam diam sit tincidunt duis,
      dictumst aenean netus mattis purus vehicula vestibulum dignissim laoreet. Ipsum nibh nec nisl netus dapibus etiam felis cubilia sociis in convallis, duis tempor bibendum vestibulum hendrerit suscipit leo fringilla mauris vulputate non, mattis aenean
      integer hac orci dolor ligula ornare sem porta. Aliquet tellus integer dis sit inceptos urna amet dui odio consectetur ac et, aenean eros viverra sapien tempus arcu cras rhoncus cubilia cursus nunc, dignissim velit ante conubia congue platea taciti
      sodales volutpat metus diam.</p>
    <p>Sollicitudin convallis penatibus sed nec suspendisse a vel sem, egestas nostra fusce nam curae potenti class, mi neque at facilisi nibh nullam facilisis. Interdum duis hendrerit quam rutrum platea donec purus pharetra egestas, hac aliquam dictum taciti
      varius leo dis sit consequat, auctor magna feugiat urna quisque mauris dolor congue. Natoque fermentum tristique tempus iaculis lacus facilisi, congue placerat torquent ultricies quis, a ridiculus ullamcorper viverra egestas varius, himenaeos scelerisque
      vestibulum nisi. Urna odio nec netus dui sodales non nam id fusce magnis commodo proin placerat pretium, ultrices nostra senectus diam at massa metus habitasse elementum ornare varius aliquam. Cum pharetra sapien faucibus accumsan massa litora,
      duis aptent ullamcorper dis sollicitudin elit, vitae vel quam dictum venenatis. Etiam rutrum iaculis faucibus nec elementum luctus eros eleifend, feugiat posuere nostra congue penatibus ac fames. Pellentesque platea lorem nulla dui libero himenaeos
      inceptos tortor convallis mollis condimentum, ac cum arcu egestas tincidunt ultricies posuere orci nostra dictum, nascetur aliquet tempor sem sodales urna maecenas adipiscing vehicula fermentum.</p>
  </article>
</div>

也可以考虑多背景，使用background-blend-mode

article {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

h1 {
  background: 
    linear-gradient(#fff,#fff),
    url("https://source.unsplash.com/9IBqihqhuHc") fixed
    rgba(0, 0, 0, 0.5);
  background-size: cover;
  background-blend-mode:overlay;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}


/** Other styles **/
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.container {
  height: 100vh;
  background-image: url("https://source.unsplash.com/9IBqihqhuHc");
  background-size: cover;
}

article {
  width: 70%;
  margin-left: auto;
  height: 100%;
  overflow: auto;
  padding: 4em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}

h1 {
  font-size: 3em;
  line-height: 1.1;
  margin: 0;
}

h1 small {
  font-weight: 500;
  font-size: 0.5em;
}

<div class="container">
  <article>
    <h1><small>Augue amet tempus sed cursus</small><br>Lorem ipsum dolor sit amet, consecturer!</h1>
    <p>Tellus urna parturient cras nulla eleifend purus posuere venenatis malesuada, aliquam dui pellentesque eros nisl porta tempor ligula. Metus ligula mauris vestibulum dictumst luctus interdum volutpat tristique, feugiat accumsan tellus senectus aenean
      curae vel facilisis, ad lacus sed imperdiet penatibus dictum habitasse. Eros porta pulvinar posuere ac semper dictumst id, ad taciti convallis curabitur etiam nam. Libero venenatis lacus faucibus per erat ut aenean vestibulum nostra, pulvinar netus
      luctus vel auctor blandit penatibus eleifend nibh donec, tempus ridiculus accumsan fames in est sodales vivamus. Praesent ut tempus parturient integer elit orci porta montes placerat nibh, iaculis cum per ipsum quis nullam diam sit tincidunt duis,
      dictumst aenean netus mattis purus vehicula vestibulum dignissim laoreet. Ipsum nibh nec nisl netus dapibus etiam felis cubilia sociis in convallis, duis tempor bibendum vestibulum hendrerit suscipit leo fringilla mauris vulputate non, mattis aenean
      integer hac orci dolor ligula ornare sem porta. Aliquet tellus integer dis sit inceptos urna amet dui odio consectetur ac et, aenean eros viverra sapien tempus arcu cras rhoncus cubilia cursus nunc, dignissim velit ante conubia congue platea taciti
      sodales volutpat metus diam.</p>
    <p>Sollicitudin convallis penatibus sed nec suspendisse a vel sem, egestas nostra fusce nam curae potenti class, mi neque at facilisi nibh nullam facilisis. Interdum duis hendrerit quam rutrum platea donec purus pharetra egestas, hac aliquam dictum taciti
      varius leo dis sit consequat, auctor magna feugiat urna quisque mauris dolor congue. Natoque fermentum tristique tempus iaculis lacus facilisi, congue placerat torquent ultricies quis, a ridiculus ullamcorper viverra egestas varius, himenaeos scelerisque
      vestibulum nisi. Urna odio nec netus dui sodales non nam id fusce magnis commodo proin placerat pretium, ultrices nostra senectus diam at massa metus habitasse elementum ornare varius aliquam. Cum pharetra sapien faucibus accumsan massa litora,
      duis aptent ullamcorper dis sollicitudin elit, vitae vel quam dictum venenatis. Etiam rutrum iaculis faucibus nec elementum luctus eros eleifend, feugiat posuere nostra congue penatibus ac fames. Pellentesque platea lorem nulla dui libero himenaeos
      inceptos tortor convallis mollis condimentum, ac cum arcu egestas tincidunt ultricies posuere orci nostra dictum, nascetur aliquet tempor sem sodales urna maecenas adipiscing vehicula fermentum.</p>
  </article>
</div>

Answer 2

你需要在父article上设置mix-blend-mode：

article {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  mix-blend-mode: overlay;
}

/** Other styles **/

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.container {
  width: 100vw;
  height: 100vh;
  background-image: url("https://source.unsplash.com/9IBqihqhuHc");
  background-size: cover;
}

article {
  width: 70%;
  margin-left: 30%;
  height: 100%;
  overflow: scroll;
  padding: 4em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
}

h1 {
  font-size: 3em;
  line-height: 1.1;
  margin: 0;
}

h1 small {
  font-weight: 500;
  font-size: 0.5em;
}

<div class="container">
  <article>
    <h1><small>Augue amet tempus sed cursus</small><br>Lorem ipsum dolor sit amet, consecturer!</h1>
    <p>Tellus urna parturient cras nulla eleifend purus posuere venenatis malesuada, aliquam dui pellentesque eros nisl porta tempor ligula. Metus ligula mauris vestibulum dictumst luctus interdum volutpat tristique, feugiat accumsan tellus senectus aenean
      curae vel facilisis, ad lacus sed imperdiet penatibus dictum habitasse. Eros porta pulvinar posuere ac semper dictumst id, ad taciti convallis curabitur etiam nam. Libero venenatis lacus faucibus per erat ut aenean vestibulum nostra, pulvinar netus
      luctus vel auctor blandit penatibus eleifend nibh donec, tempus ridiculus accumsan fames in est sodales vivamus. Praesent ut tempus parturient integer elit orci porta montes placerat nibh, iaculis cum per ipsum quis nullam diam sit tincidunt duis,
      dictumst aenean netus mattis purus vehicula vestibulum dignissim laoreet. Ipsum nibh nec nisl netus dapibus etiam felis cubilia sociis in convallis, duis tempor bibendum vestibulum hendrerit suscipit leo fringilla mauris vulputate non, mattis aenean
      integer hac orci dolor ligula ornare sem porta. Aliquet tellus integer dis sit inceptos urna amet dui odio consectetur ac et, aenean eros viverra sapien tempus arcu cras rhoncus cubilia cursus nunc, dignissim velit ante conubia congue platea taciti
      sodales volutpat metus diam.</p>
    <p>Sollicitudin convallis penatibus sed nec suspendisse a vel sem, egestas nostra fusce nam curae potenti class, mi neque at facilisi nibh nullam facilisis. Interdum duis hendrerit quam rutrum platea donec purus pharetra egestas, hac aliquam dictum taciti
      varius leo dis sit consequat, auctor magna feugiat urna quisque mauris dolor congue. Natoque fermentum tristique tempus iaculis lacus facilisi, congue placerat torquent ultricies quis, a ridiculus ullamcorper viverra egestas varius, himenaeos scelerisque
      vestibulum nisi. Urna odio nec netus dui sodales non nam id fusce magnis commodo proin placerat pretium, ultrices nostra senectus diam at massa metus habitasse elementum ornare varius aliquam. Cum pharetra sapien faucibus accumsan massa litora,
      duis aptent ullamcorper dis sollicitudin elit, vitae vel quam dictum venenatis. Etiam rutrum iaculis faucibus nec elementum luctus eros eleifend, feugiat posuere nostra congue penatibus ac fames. Pellentesque platea lorem nulla dui libero himenaeos
      inceptos tortor convallis mollis condimentum, ac cum arcu egestas tincidunt ultricies posuere orci nostra dictum, nascetur aliquet tempor sem sodales urna maecenas adipiscing vehicula fermentum.</p>
  </article>
</div>