CSS，固定内容剪辑但不是背景

Question

我有这样的设置:

body, html {
  width: 100%;
}

.container {
  width: 100%;
  min-height: 50px
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 60px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
	z-index: 1;
}

.content {
  background-image: url('http://img04.deviantart.net/c00a/i/2013/020/7/e/w__disney_texture_stock_by_redwolf518stock-d5s70kx.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  background-color: black;
  color: white;
  font-size: 16px;
  padding: 50px;
}

<div class="container">
  <div class="header">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>My profile</button>
  </div>
  <div class="content">
    <h1>
      Title
    </h1>
    <p>
    Lorem ipsum dolor sit amet, ne mel integre disputationi delicatissimi, per quando populo iudicabit eu. Qui ea copiosae lucilius. Meis minimum usu ea. Ut has quis nostro conceptam, eu vel hinc nostrum nominati. Vel at nominati maluisset, ne quando populo nostrum nec, et est nulla temporibus. No sit bonorum luptatum, affert scripta tincidunt ex usu. Ei homero scaevola torquatos sed, pri dolore commune reprehendunt ex, moderatius temporibus his ei.</p>

<p>In dicam iudico his, vel cu latine graecis, ei justo vidisse intellegebat vel. Ex vel dicat errem. Vim ea ornatus expetendis efficiantur, feugiat debitis appetere vis cu. Ius utroque inciderint reprehendunt no, ei homero persius patrioque vis. In eirmod discere nominavi vel. Oblique mediocritatem no mei, perpetua adversarium pri ex.</p>

<p>Eius omnis prompta no usu, probatus persecuti dissentiet et qui, qui albucius molestie at. Partem splendide nam et, adhuc denique sed ad. Eos at odio fabellas tractatos. Saepe aeterno sit ex.</p>

<p>Usu ut putent animal appetere. Suas eius idque ut sea. Te ius nisl definitionem. Nam esse alterum deleniti ei, usu in assueverit referrentur. Ut purto simul mucius eum.</p>

<p>Mel ne ceteros apeirian scriptorem. Id augue omnes dicam vix, sed atqui vidisse legendos ex. Scriptorem persequeris disputationi vel ei, novum adolescens quo ex. Quaeque efficiantur eum ei. Et has decore appellantur, option similique contentiones an pro.</p>
<p>
    Lorem ipsum dolor sit amet, ne mel integre disputationi delicatissimi, per quando populo iudicabit eu. Qui ea copiosae lucilius. Meis minimum usu ea. Ut has quis nostro conceptam, eu vel hinc nostrum nominati. Vel at nominati maluisset, ne quando populo nostrum nec, et est nulla temporibus. No sit bonorum luptatum, affert scripta tincidunt ex usu. Ei homero scaevola torquatos sed, pri dolore commune reprehendunt ex, moderatius temporibus his ei.</p>

<p>In dicam iudico his, vel cu latine graecis, ei justo vidisse intellegebat vel. Ex vel dicat errem. Vim ea ornatus expetendis efficiantur, feugiat debitis appetere vis cu. Ius utroque inciderint reprehendunt no, ei homero persius patrioque vis. In eirmod discere nominavi vel. Oblique mediocritatem no mei, perpetua adversarium pri ex.</p>

<p>Eius omnis prompta no usu, probatus persecuti dissentiet et qui, qui albucius molestie at. Partem splendide nam et, adhuc denique sed ad. Eos at odio fabellas tractatos. Saepe aeterno sit ex.</p>

<p>Usu ut putent animal appetere. Suas eius idque ut sea. Te ius nisl definitionem. Nam esse alterum deleniti ei, usu in assueverit referrentur. Ut purto simul mucius eum.</p>

<p>Mel ne ceteros apeirian scriptorem. Id augue omnes dicam vix, sed atqui vidisse legendos ex. Scriptorem persequeris disputationi vel ei, novum adolescens quo ex. Quaeque efficiantur eum ei. Et has decore appellantur, option similique contentiones an pro.</p>
<p>
    Lorem ipsum dolor sit amet, ne mel integre disputationi delicatissimi, per quando populo iudicabit eu. Qui ea copiosae lucilius. Meis minimum usu ea. Ut has quis nostro conceptam, eu vel hinc nostrum nominati. Vel at nominati maluisset, ne quando populo nostrum nec, et est nulla temporibus. No sit bonorum luptatum, affert scripta tincidunt ex usu. Ei homero scaevola torquatos sed, pri dolore commune reprehendunt ex, moderatius temporibus his ei.</p>

<p>In dicam iudico his, vel cu latine graecis, ei justo vidisse intellegebat vel. Ex vel dicat errem. Vim ea ornatus expetendis efficiantur, feugiat debitis appetere vis cu. Ius utroque inciderint reprehendunt no, ei homero persius patrioque vis. In eirmod discere nominavi vel. Oblique mediocritatem no mei, perpetua adversarium pri ex.</p>

<p>Eius omnis prompta no usu, probatus persecuti dissentiet et qui, qui albucius molestie at. Partem splendide nam et, adhuc denique sed ad. Eos at odio fabellas tractatos. Saepe aeterno sit ex.</p>

<p>Usu ut putent animal appetere. Suas eius idque ut sea. Te ius nisl definitionem. Nam esse alterum deleniti ei, usu in assueverit referrentur. Ut purto simul mucius eum.</p>

<p>Mel ne ceteros apeirian scriptorem. Id augue omnes dicam vix, sed atqui vidisse legendos ex. Scriptorem persequeris disputationi vel ei, novum adolescens quo ex. Quaeque efficiantur eum ei. Et has decore appellantur, option similique contentiones an pro.</p>
  </div>
</div>

基本上，有一个带有透明背景的固定标题和一些带有图像背景的内容。

我想实现以下效果:当内容在标题下方向上滚动时，文本应该被剪掉，就像在看不见的墙后面一样，但背景应该保持可见。

我尝试将 clip-path 属性添加到 .content，并引用固定位置的 svg，但我就是找不到有效的组合。

有人有任何(其他)想法吗？

我想我总是可以使用 javascript 定位背景图像，但这可能有点卡顿。仅 CSS 的解决方案将是最好的。

我可以接受仅适用于 Chrome(针对电子)的解决方案。

Answer 1

此解决方案使用 mix-blend-mode: screen .您应该将所有内容安排在以下层中:

1. 标题

2. 背景叠加层。叠加层应具有阻止黑色内容但显示白色内容的 mix-blend-mode: screen。叠加层应具有 pointer-events: none 以启用与其下方内容的交互。

3. 页眉背景。将隐藏文本的黑色背景区域。我使用了渐变来柔化文字的消失。

4. 正文。

叠加层覆盖了除标题之外的所有内容。显示白色文本，但不显示黑色标题背景，标题背景下的文本也是如此。

body {
    position: relative;
  margin: 0;
}

.container {
  width: 100%;
  min-height: 50px
}

.header, .header-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 60px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
}

.header {
  z-index: 3;
}

.header-bg {
  z-index: 1;
  background: linear-gradient(to bottom, black 75%, transparent 100%);
}

.content {
  color: white;
  font-size: 16px;
  padding: 50px;
}

.overlay {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: 2;
  background-image: url('http://img04.deviantart.net/c00a/i/2013/020/7/e/w__disney_texture_stock_by_redwolf518stock-d5s70kx.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  background-color: black;
  mix-blend-mode: screen;
  pointer-events: none;

}

<div class="overlay"></div>

<div class="container">
  <div class="header-bg"></div>

  <div class="header">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>My profile</button>
  </div>
  
  <div class="content">
    <h1>
      Title
    </h1>
    <p>
    Lorem ipsum dolor sit amet, ne mel integre disputationi delicatissimi, per quando populo iudicabit eu. Qui ea copiosae lucilius. Meis minimum usu ea. Ut has quis nostro conceptam, eu vel hinc nostrum nominati. Vel at nominati maluisset, ne quando populo nostrum nec, et est nulla temporibus. No sit bonorum luptatum, affert scripta tincidunt ex usu. Ei homero scaevola torquatos sed, pri dolore commune reprehendunt ex, moderatius temporibus his ei.</p>

<p>In dicam iudico his, vel cu latine graecis, ei justo vidisse intellegebat vel. Ex vel dicat errem. Vim ea ornatus expetendis efficiantur, feugiat debitis appetere vis cu. Ius utroque inciderint reprehendunt no, ei homero persius patrioque vis. In eirmod discere nominavi vel. Oblique mediocritatem no mei, perpetua adversarium pri ex.</p>

<p>Eius omnis prompta no usu, probatus persecuti dissentiet et qui, qui albucius molestie at. Partem splendide nam et, adhuc denique sed ad. Eos at odio fabellas tractatos. Saepe aeterno sit ex.</p>

<p>Usu ut putent animal appetere. Suas eius idque ut sea. Te ius nisl definitionem. Nam esse alterum deleniti ei, usu in assueverit referrentur. Ut purto simul mucius eum.</p>

<p>Mel ne ceteros apeirian scriptorem. Id augue omnes dicam vix, sed atqui vidisse legendos ex. Scriptorem persequeris disputationi vel ei, novum adolescens quo ex. Quaeque efficiantur eum ei. Et has decore appellantur, option similique contentiones an pro.</p>
<p>
    Lorem ipsum dolor sit amet, ne mel integre disputationi delicatissimi, per quando populo iudicabit eu. Qui ea copiosae lucilius. Meis minimum usu ea. Ut has quis nostro conceptam, eu vel hinc nostrum nominati. Vel at nominati maluisset, ne quando populo nostrum nec, et est nulla temporibus. No sit bonorum luptatum, affert scripta tincidunt ex usu. Ei homero scaevola torquatos sed, pri dolore commune reprehendunt ex, moderatius temporibus his ei.</p>

<p>In dicam iudico his, vel cu latine graecis, ei justo vidisse intellegebat vel. Ex vel dicat errem. Vim ea ornatus expetendis efficiantur, feugiat debitis appetere vis cu. Ius utroque inciderint reprehendunt no, ei homero persius patrioque vis. In eirmod discere nominavi vel. Oblique mediocritatem no mei, perpetua adversarium pri ex.</p>

<p>Eius omnis prompta no usu, probatus persecuti dissentiet et qui, qui albucius molestie at. Partem splendide nam et, adhuc denique sed ad. Eos at odio fabellas tractatos. Saepe aeterno sit ex.</p>

<p>Usu ut putent animal appetere. Suas eius idque ut sea. Te ius nisl definitionem. Nam esse alterum deleniti ei, usu in assueverit referrentur. Ut purto simul mucius eum.</p>

<p>Mel ne ceteros apeirian scriptorem. Id augue omnes dicam vix, sed atqui vidisse legendos ex. Scriptorem persequeris disputationi vel ei, novum adolescens quo ex. Quaeque efficiantur eum ei. Et has decore appellantur, option similique contentiones an pro.</p>
<p>
    Lorem ipsum dolor sit amet, ne mel integre disputationi delicatissimi, per quando populo iudicabit eu. Qui ea copiosae lucilius. Meis minimum usu ea. Ut has quis nostro conceptam, eu vel hinc nostrum nominati. Vel at nominati maluisset, ne quando populo nostrum nec, et est nulla temporibus. No sit bonorum luptatum, affert scripta tincidunt ex usu. Ei homero scaevola torquatos sed, pri dolore commune reprehendunt ex, moderatius temporibus his ei.</p>

<p>In dicam iudico his, vel cu latine graecis, ei justo vidisse intellegebat vel. Ex vel dicat errem. Vim ea ornatus expetendis efficiantur, feugiat debitis appetere vis cu. Ius utroque inciderint reprehendunt no, ei homero persius patrioque vis. In eirmod discere nominavi vel. Oblique mediocritatem no mei, perpetua adversarium pri ex.</p>

<p>Eius omnis prompta no usu, probatus persecuti dissentiet et qui, qui albucius molestie at. Partem splendide nam et, adhuc denique sed ad. Eos at odio fabellas tractatos. Saepe aeterno sit ex.</p>

<p>Usu ut putent animal appetere. Suas eius idque ut sea. Te ius nisl definitionem. Nam esse alterum deleniti ei, usu in assueverit referrentur. Ut purto simul mucius eum.</p>

<p>Mel ne ceteros apeirian scriptorem. Id augue omnes dicam vix, sed atqui vidisse legendos ex. Scriptorem persequeris disputationi vel ei, novum adolescens quo ex. Quaeque efficiantur eum ei. Et has decore appellantur, option similique contentiones an pro.</p>
  </div>
</div>