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。您应该在以下层中安排所有内容：

标题
背景叠加层。叠加层应该mix-blend-mode: screen阻止黑色内容，但会显示白色内容。叠加层应为pointer-events: none，以便与其下的内容进行互动。
标题背景。黑色背景区域将隐藏文本。我使用渐变来软化文本消失。
案文。

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

＆＃13;

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;

}

＆＃13;

<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>

＆＃13;

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

1 个答案: