使用 CSS 屏蔽图像

Question

我做了一个这样的设计

如何用css掩盖背景？

我试过这样的代码

.img-poster {
  display: block;
  max-width: 100%;
  -webkit-mask-image: url(https://cdn.pbrd.co/images/GYiCod1.png), url(https://cdn.pbrd.co/images/GYiCQsM.png);
  -webkit-mask-position: bottom center, center center;
  -webkit-mask-repeat: no-repeat, no-repeat;
}

.add {
  -webkit-mask-composite: add;
}

<section class="section poster-container">
  <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="" class="img-poster add img-responsive">
</section>

我使用的蒙版图像是

https://i.stack.imgur.com/fg2k5.png

https://i.stack.imgur.com/zmylJ.png

你们能告诉我我的代码有什么问题吗？我知道我只能导入到 png，但我尝试使用 css

Answer 1

您只需要考虑作为蒙版底部的一张图像，然后对另一部分使用简单的渐变。你也不需要mask-composite. 只需调整大小/位置，使两个蒙版不重叠：

.img-poster {
  display: block;
  max-width: 100%;
  -webkit-mask:  
     linear-gradient(#fff,#fff)              top,
     url(https://i.ibb.co/5WvbqgG/zmylJ.png) bottom;
  -webkit-mask-size:
     100% calc(100% - 30px),
     auto 30px;
  -webkit-mask-repeat: repeat-x;
  mask:  
     linear-gradient(#fff,#fff)              top,
     url(https://i.ibb.co/5WvbqgG/zmylJ.png) bottom;
  mask-size:
     100% calc(100% - 30px),
     auto 30px;
  mask-repeat: repeat-x;
}

<section class="section poster-container">
  <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="" class="img-poster add img-responsive">
</section>