CSS 中背景图像中的负遮罩

Question

我想使用 png 文件在 css 中创建一个掩码，但以不同的方式。基本上我不希望蒙版显示下面的内容，但我希望它剪切下面的内容并显示其他所有内容。就像负面面具一样。重要的事实是我想掩盖背景图像。这就是我想做的::我这里有3层。第一个是视频（html），然后是作为重复背景（CSS 背景）的点背景，然后是蒙版 - 需要是 png 图像，因为这将是徽标。我希望蒙版删除其下方的背景并显示视频。.cont {  width: 100%;  height: 450px;  position: relative;  background: url("http://www.kamiennadlyna.pl/test/img/video-bg.jpg") no-repeat center;}.maska {  width: 100%;  height: 100%;  background: url("http://www.kamiennadlyna.pl/test/img/mask.png") repeat;  left: 0;  bottom: 0;  position: absolute;  text-align: center;  /*-webkit-mask-image: url("https://www.tucado.com/images/logo.png")*/}<div class="cont">  <video autoplay muted loop id="myVideo">          <source src="http://www.kamiennadlyna.pl/video.mp4" type="video/mp4" poster="http://www.kamiennadlyna.pl/test/img/video-bg.jpg">        </video>  <div class="maska">  </div></div>jsfiddle

Answer 1

新答案

根据更新，您可以执行以下操作。这个想法是考虑徽标的倒置版本，其中透明部分不透明（并且非透明部分透明），然后应用多个遮罩层以获得您想要的效果。

我从旧答案中保留了同样的想法。我正在考虑覆盖层中心的徽标：

.overlay {

  --h:200px; /* height of the logo*/

  --w:200px; /* width of the logo */

  height:300px;

  background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;

 

  -webkit-mask:

      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),

      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),

      linear-gradient(#fff,#fff) left  /calc(50.1% - var(--w)/2) 100%,

      linear-gradient(#fff,#fff) right /calc(50.1% - var(--w)/2) 100%,

      url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);

  mask:

      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),

      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),

      linear-gradient(#fff,#fff) left  /calc(50% - var(--w)/2) 100%,

      linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,

      url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);

  -webkit-mask-repeat:no-repeat;

  mask-repeat:no-repeat;

}

body {

  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;

}

<div class="overlay"></div>

我们也可以保留mask-composite原来的标志，这样调整和改变位置会更容易。请注意遮罩层的顺序，这与第一个示例不同，这里很重要：

.overlay {

  height:300px;

  background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;

  -webkit-mask:

      linear-gradient(#fff,#fff),

      url(https://i.ibb.co/cKBT5WQ/logo.png) center/200px 200px;

  -webkit-mask-repeat:no-repeat;

  -webkit-mask-composite:source-out;

  mask:

      linear-gradient(#fff,#fff),

      url(https://i.ibb.co/cKBT5WQ/logo.png) center/200px 200px;

  mask-repeat:no-repeat;

  mask-composite:exclude;

}

body {

  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;

}

<div class="overlay"></div>