如何在div中屏蔽文本

时间:2017-06-12 11:52:24

标签: html css css3 mask masking

我试图将我的文字掩盖成一个类似梯形的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>

0 个答案:

没有答案