如何为背景创建剪贴蒙版？

Question

在第一层，我有一个背景图像，然后是模糊（透明度）图层，最后我想要一组div，使这个效果干净：

我的Html有点太大了，无法复制到这里，但我只想要一个想法或者一个简单的例子，说明如果可能的话我该怎么做。

我知道一种方法是制作这样的单个图片文件，但我想用CSS构建它。 我试图使图像相对，然后模糊div绝对和z-index -1和robs组绝对以及z-index 1，它不起作用。

Answer 1

以下是我如何做到这一点：

＆＃13;

＆＃13;

body {
  margin: 0;
}

[flex-container] {
  background: transparent url("https://images.unsplash.com/photo-1445251836269-d158eaa028a6?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg=") no-repeat 50% 50% / cover;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

[flex-container] svg {
  max-width: 90vw;
  max-height: 90vh;
  height: auto;
  width: auto;
}

[flex-container] [flex-white] {
  flex-grow: 1;
  background-color: rgba(255, 255, 255, 0.35);
}

[flex-container] [center-flex] {
  flex-grow: 0;
  display: flex;
  max-height: 90vw;
}

＆＃13;

<div flex-container>
  <div flex-white></div>
  <div center-flex>
    <div flex-white></div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 620 620" preserveAspectRatio="xMidYMid meet" height="620" width="620">
      <defs>
        <mask id="clip-path">
          <rect fill="white" x="0" y="0" width="620" height="620" />
          <path fill="black" d="M1.032193281120934,2.9326408166644313v-1.6000000000000005a2,2,0,0,0,-2,-2h-4a2,2,0,0,0,-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2,-2Z" transform="matrix(17.8246 17.6867 -17.6867 17.8246 419.289 145.797)" />
          <path fill="black" d="M9.837478544552232,2.9766420664520377v-1.6000000000000005a2,2,0,0,0,-2,-2h-4a2,2,0,0,0,-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2,-2Z" transform="matrix(17.8246 17.6867 -17.6867 17.8246 419.289 145.797)" />
          <path fill="black" d="M9.837478544552228,11.737917113101712v-1.6000000000000005a2,2,0,0,0,-2,-2h-4a2,2,0,0,0,-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2,-2Z" transform="matrix(17.8246 17.6867 -17.6867 17.8246 419.289 145.797)" />
          <path fill="black" d="M1.032197869095377,11.693911484294599v-1.6000000000000005a2,2,0,0,0,-2,-2h-4a2,2,0,0,0,-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2,-2Z" transform="matrix(17.8246 17.6867 -17.6867 17.8246 419.289 145.797)" />
        </mask>
      </defs>
      <rect mask="url(#clip-path)" x="0" y="0" width="620" height="620" fill="rgba(255,255,255,.35)" />
    </svg>
    <div flex-white></div>
  </div>
  <div flex-white></div>
</div>

＆＃13;

＆＃13;

＆＃13;

要进行遮罩，您需要查看<svg>内部。如果您不喜欢我使用的路径，请更换它们。面具中唯一重要的规则是：填充是白色的，孔是黑色的。

唯一的问题是：如果你在视口中拉伸svg，它最终会失真。为了避免这种情况，我将它集中在视口中，并将其包裹在覆盖剩余空间的柔性容器中，相应地。

Answer 2

由于人们提到的原因，使用html和div会很困难。但是，我创建了一个fiddle来完成与画布和一些javascript类似的东西。

＆＃13;

＆＃13;

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
ctx.fillRect(0,0,512,512);
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(255, 0, 0)";
ctx.beginPath();
ctx.moveTo(150,10);
ctx.lineTo(180,40);
ctx.lineTo(150, 70);
ctx.lineTo(120, 40);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(190,50);
ctx.lineTo(220,80);
ctx.lineTo(190, 110);
ctx.lineTo(160, 80);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(150,90);
ctx.lineTo(180,120);
ctx.lineTo(150, 150);
ctx.lineTo(120, 120);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(110,50);
ctx.lineTo(140,80);
ctx.lineTo(110, 110);
ctx.lineTo(80, 80);
ctx.closePath();
ctx.fill();

＆＃13;

.image-container {
    position: relative;
    width: 512px;
    height: 512px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container .after {
    display: block;
    background: rgba(0, 0, 0, 0);
}

＆＃13;

<div class="image-container">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png">
    <canvas class="after" id="myCanvas"></canvas>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

据我所知，子元素的不透明度不能低于它的父元素。即如果父母是50％＆＃34;通过＆＃34;比孩子不能100％＆＃34;通过＆＃34;，最多也会看到50％。

我可能是错的，我只是知道我之前遇到过这个问题而我自己从未解决过这个问题。

我恭维并耐心地等待比我更了解的人......但我相信情况确实如此。