CSS, fixed clip of content, but no background
I have a setup like this:
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>
Basically, there is a fixed header with a transparent background and some content with an image background.
I would like to achieve the following effect: as the content scrolls below the heading, the text should be clipped as if it is behind an invisible wall, but the background should remain visible.
I tried to add a property clip-path
to .content
and reference the fixed positioned svg, but I just couldn't find the combination that worked.
Does anyone have any other ideas?
I guess I could always position the background image using javascript, but that would probably be something like janky. Only a CSS solution would be the best.
I'll be fine with solutions that only work in Chrome (targeting electron).
+3
source to share
1 answer
This solution uses mix-blend-mode: screen
. You have to arrange everything in the following layers:
-
Title
-
Overlay background. The overlay must have
mix-blend-mode: screen
one that blocks black content but shows white content. The overlay must havepointer-events: none
to allow interaction with the content below it. -
Header background. An area with a black background that will hide the text. I used a gradient to soften the disappearance of the text.
-
Text.
The overlay covers everything but the title. White text is displayed, but there is no black background of the title, and the text is also below the title.
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>
+1
source to share