3
固定夹我有这样的设置：CSS，的内容，但不背景
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;
\t 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（针对电子）的解决方案。
你可以发布一个小提琴或类似 – pratikpawar
点击“运行代码片断” :) – panta82