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