我试图将我的文字掩盖成一个类似梯形的div。下面的代码片段显示了我有多远。问题是de text没有被掩盖到div中。有没有办法做到这一点?
最重要的部分是de line保持固定。我尝试过mask-attachment:fixed但是看起来不起作用,浏览器支持也不适合使用mask-attachment。
.c-page {
position: absolute;
}
.c-page--left {
width: 55%;
left: 10%;
display: table-cell;
background: white;
z-index: 5;
min-height: 200vh;
background: url('https://joerievers.be/images/clip-path.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 55% 100vh;
}
.c-page--right {
width: 45%;
right: 10%;
display: table-cell;
background: white;
z-index: 1;
}
<div class="c-page c-page--left">
<div class="content">
<a href="#" class="c-btn">More cases</a>
<h1>H1: Test</h1>
<h2>H2: The quick brown fox</h2>
<h3>H3: Jumps over the lazy dog</h3>
<h4>H4: How vexingly quick daft zebras jump!</h4>
<h5>H5: Longer pangrams may afford more opportunity for humor, cleverness, or thoughtfulness.</h5>
<div class="wysiwyg">
<p>Short pangrams in English are more <a href="#">difficult to come up</a> with and tend to use uncommon words. A perfect pangram contains every letter of the alphabet only once and can be considered an anagram of the alphabet; it is the shortest possible
pangram. An example is the phrase "Cwm fjord bank glyphs vext quiz" (cwm, a loan word from Welsh, means a steep-sided valley, particularly in Wales). However, such examples are not usually understood even by native English speakers, and so arguably
are not really English pangrams.</p>
<ul>
<li>Woven silk pyjamas exchanged for blue quartz.</li>
<li>The lazy major was fixing Cupid’s broken quiver.</li>
<li>Jacky can now give six big tips from the old quiz.</li>
<li>Fax back Jim’s Gwyneth Paltrow video quiz.</li>
<li>Grumpy wizards make toxic brew for the evil queen and jack.</li>
</ul>
<p>
The best known English pangram is <em>"The quick brown fox jumps over the lazy dog."</em> It has been used since at least the late 19th century, was utilized by Western Union to test Telex / TWX data communication equipment for accuracy and reliability,[1]
and is now used by a number of computer programs (most notably the font viewer built into Microsoft Windows) to display <strong>computer fonts</strong>.
</p>
</div>
</div>
</div>
<div class="c-page c-page--right">
<a href="#" class="c-btn">More cases</a>
<h1>H1: Test</h1>
<h2>H2: The quick brown fox</h2>
<h3>H3: Jumps over the lazy dog</h3>
<h4>H4: How vexingly quick daft zebras jump!</h4>
<h5>H5: Longer pangrams may afford more opportunity for humor, cleverness, or thoughtfulness.</h5>
<div class="wysiwyg">
<p>Short pangrams in English are more <a href="#">difficult to come up</a> with and tend to use uncommon words. A perfect pangram contains every letter of the alphabet only once and can be considered an anagram of the alphabet; it is the shortest possible
pangram. An example is the phrase "Cwm fjord bank glyphs vext quiz" (cwm, a loan word from Welsh, means a steep-sided valley, particularly in Wales). However, such examples are not usually understood even by native English speakers, and so arguably
are not really English pangrams.</p>
<ul>
<li>Woven silk pyjamas exchanged for blue quartz.</li>
<li>The lazy major was fixing Cupid’s broken quiver.</li>
<li>Jacky can now give six big tips from the old quiz.</li>
<li>Fax back Jim’s Gwyneth Paltrow video quiz.</li>
<li>Grumpy wizards make toxic brew for the evil queen and jack.</li>
</ul>
<p>
The best known English pangram is <em>"The quick brown fox jumps over the lazy dog."</em> It has been used since at least the late 19th century, was utilized by Western Union to test Telex / TWX data communication equipment for accuracy and reliability,[1]
and is now used by a number of computer programs (most notably the font viewer built into Microsoft Windows) to display <strong>computer fonts</strong>.
</p>
</div>
</div>