CSS：如何在后台扩展所有基础层？

debugcn 发表于 Dev

姆比贡

有什么方法可以创建具有样式的div，以将所有基础层钻孔到背景？无论放置在何处，都应提供橡皮擦效果。基本上，我对CSS感兴趣，但是如果您能提出任何达到以下结果的方法，我将不胜感激。
示例如下：

（1）-背景
（2）-中间层（可以是多个）
（3）-高div（类似于橡皮擦，使除背景之外的所有基础div透明

在此处输入图片说明

阿德里亚诺66

您实际上不能“钻”一个孔，但可以用例如一个框覆盖您的内容。与背景中的框具有相同的固定背景background-attachment: fixed;

.box1, .box3 {
  background: url("http://placekitten.com/g/800/600") repeat fixed center center rgba(0, 0, 0, 0);
}

.box2 {
  background: rgba(255,255,255,0.6);
  min-height: 200px;
  width: 80%;
  margin: 0 auto;
  padding: 2em;
  position: relative;
}

.box3 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: fixed;
  top: 25%;
  left: 25%;
  border: 4px solid red;
  pointer-events: none; /* ignore pointer events */
}

<body class="box1">
  
  <div class="box2">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed earum repellendus voluptatem a iusto ex, incidunt animi ipsam, nesciunt qui quod minima nobis, veniam cum temporibus numquam at obcaecati ipsa fugiat facilis asperiores dignissimos? Ipsa molestiae minima iusto at qui explicabo asperiores, perspiciatis soluta nemo tempore dolore sit optio voluptatum!</p>
   <p>Quod eos repudiandae nobis incidunt vitae impedit dolores doloremque, debitis sed. Eos voluptate, dolorem odio labore laudantium corrupti molestias natus nisi laborum? Officiis saepe ad voluptates alias ab temporibus quo esse ut neque fugit? Praesentium eaque possimus provident sunt id, iure soluta aperiam, corrupti esse labore voluptate animi odio autem!</p>
   <p>Explicabo nostrum aspernatur, voluptas rem dicta consequuntur modi vel quae! Enim error aspernatur rem ea sapiente ratione sequi nulla numquam pariatur debitis dolorum saepe voluptates odit architecto minima, tempora iusto magni repudiandae assumenda vel quisquam eos placeat minus mollitia! Deserunt nisi eligendi, excepturi impedit quam eaque fugiat quia, suscipit consectetur.</p>
   <p>Doloribus repellat explicabo magni cupiditate possimus quisquam, a ullam labore maxime quam voluptatibus blanditiis, voluptate alias recusandae fugit eos distinctio. A rerum fugit deserunt suscipit sint quibusdam voluptatum obcaecati blanditiis laudantium distinctio dolor nobis molestiae facilis earum voluptate natus, omnis vitae, tempore modi! Molestiae maxime adipisci fuga accusamus soluta neque.</p>
   <p>Quas culpa, harum, eos velit atque placeat eaque fugiat nobis quo quae ex quos molestiae pariatur. Cumque sed ab dolorum assumenda nisi, sit, unde in. Nihil reiciendis provident, mollitia ipsa accusantium cumque ipsam magnam tempora natus a nesciunt dolorum, inventore culpa sapiente pariatur magni obcaecati tenetur sit voluptatem recusandae porro.</p>
   <p>Culpa, id, amet! Ipsum natus ab, voluptatem maiores similique quod. Culpa asperiores perferendis non sit reprehenderit quaerat, soluta suscipit deserunt? Repellat vero tenetur quaerat, magnam dicta delectus consequatur doloribus? Illum magnam, veritatis sapiente delectus ratione molestiae libero similique praesentium accusantium repellat. Porro sunt vero dolores, voluptas laudantium, nisi tempore saepe!</p>
   <p>Vero minima aliquam sapiente dolorem harum obcaecati enim itaque atque molestias deserunt numquam dicta, natus eaque consectetur voluptatibus, adipisci voluptas molestiae cupiditate nulla fuga voluptatem impedit quis magnam accusantium. Accusantium asperiores, nisi reprehenderit consequatur facilis. Recusandae maxime nobis ullam ducimus vel deleniti explicabo sint soluta. Modi recusandae temporibus consectetur, libero.</p>
   <p>A facilis nemo hic quae fugit, aliquam ipsa facere ullam voluptate architecto cum ducimus, debitis quod eum corporis. Sapiente dicta quisquam enim beatae qui unde perferendis nostrum vel iusto fugiat saepe obcaecati quasi velit, repudiandae veniam odit quam exercitationem non eius et similique voluptate explicabo natus. Dolorum quaerat, nam reiciendis!</p>
   <p>Et quisquam, cum magnam dolorum eveniet quas dolorem. Aperiam optio distinctio quidem quasi recusandae eaque, earum ad rerum voluptatem enim soluta explicabo quas dolorum consequatur quis pariatur? Ipsam totam, minima iste cumque consequuntur quae natus blanditiis commodi velit quo nulla tempore voluptas veniam! Accusamus quisquam quidem omnis voluptatem, voluptas inventore.</p>
   <p>At earum similique deserunt nulla, aut autem, reprehenderit perspiciatis provident, nesciunt tempora commodi eius vitae quasi ad ea minima voluptates temporibus excepturi hic modi tenetur. Earum vel quia error sed, distinctio, beatae laborum suscipit dignissimos cumque? Quasi excepturi aliquid nulla placeat, reiciendis soluta vitae illum quisquam assumenda quibusdam quod cum.</p>
  </div>

  <div class="box3"></div>
  
</body>