CSS: 如何将底层的所有层都钻到背景中？

Question

有没有什么方法可以创建 div 的样式，将所有底层层钻到背景中？无论将 DIV 放在什么地方，它都应该提供橡皮擦效果。基本上，我对 CSS 感兴趣，但如果您能建议任何方法来达到以下结果，我将不胜感激。
示例如下：

(1) - 背景
(2) - 中间层的（可以是多个）
(3) - 上层 div（像橡皮擦，使所有底层 divs 透明，背景除外）

Answer 1

您可以 "fake" 使用背景图片作为 div 的背景。

Answer 2

基本思路是在 DIV #1 中显示背景图像，在 DIV #3 中显示同一图像的一部分。看起来他中间 DIV 是透明的，但实际上我们在上面放置了一个补丁以使其看起来像那样。

<!DOCTYPE html>
<html>
<head>
<style>
.s1 { 
    background-color: gray;
    background-image: url('http://images.wisegeek.com/forest.jpg');
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.s3{
    background-image: url('http://images.wisegeek.com/forest.jpg');
    background-repeat: no-repeat;
}
</style>
</head>

<body>

<div id="div1" class="s1" style="position:relative; top:50px; left:50px; height:200px; width:300px;">

<div id="div2" style="position:absolute; top:20px; left:20px; height:60px; width:260px;">Now is the time for all good men to come to the aid of their party. Now is the time for all good men to come to the aid of their party.</div>

<div id="div3" class="s3" style="position:absolute; top:30px; left:30px; height:50px; width:50px; background-position: -30px -30px;"></div>

</body>

</html>

Answer 3

你实际上不能 'drill' 一个洞，但你可以用一个盒子覆盖你的内容，例如。使用 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>

CSS: 如何将底层的所有层都钻到背景中？

CSS: How to drill all the underlying layers up to the background?

css

background-image