使用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://istack.dev59.com/fg2k5.webp

https://istack.dev59.com/zmylJ.webp

你们能告诉我代码中有什么问题吗？我知道可以直接导入png，但我尝试使用css

- GerryofTrivia

---

你可以在本地使用多个背景图片，不需要使用前缀。请参考此处的第一个示例：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds - Kresimir Pendic

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>

- Temani Afif

Answer 2

SVG + 滤镜方案

使用 SVG 方案创建图像中的锯齿边缘不需要使用具有锯齿边缘的栅格图像模式。因此，这种 SVG 方案可以应用于任何图像，并使其具有自适应性。

考虑使用相同的图像两次来创建锯齿边缘。将滤镜应用于下层图像，因此它会变得稍微大一些。原始图像叠加在顶部，因此边缘上的锯齿变得可见。为了仅在下边框上保留锯齿，我们使用侧边的遮罩切掉不必要的锯齿。

.container {
 width:90vw;
 height:90vh;
 }

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
   viewBox="0 0 1800 900" >
 <defs> 
   <mask id="msk1"> 
        <rect x="100%" y="100%"  fill="white" /> 
      <rect x="1700" y="0" width="50" height="900" fill="white" />
   </mask>
     <filter id="displacementFilter">
     <feTurbulence type="turbulence" baseFrequency="0.01 0.01"
        numOctaves="2" result="turbulence" seed="1"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="65" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
    </filter>    
 </defs> 
        
       <!-- The image is processed by a filter and therefore overall dimensions have increased due to the height of the teeth -->
   <image   filter="url(#displacementFilter)" xlink:href="https://istack.dev59.com/paWbQ.webp.jpg" width="1700" height="850" />
    <rect mask="url(#msk1)" x="1700" y="0" width="50" height="900" fill="white" /> 
    <!-- The same original image, but without filters  -->
  <image x="0"  xlink:href="https://istack.dev59.com/paWbQ.webp.jpg" width="1700" height="850" />
</svg> 
</div> 

另一张图片

 .container {
 width:90vw;
 height:90vh;
 }

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
   viewBox="0 0 1800 900" >
 <defs> 
   <mask id="msk1"> 
        <rect x="100%" y="100%"  fill="white" /> 
      <rect x="1700" y="0" width="50" height="900" fill="white" />
   </mask>
     <filter id="displacementFilter">
     <feTurbulence type="turbulence" baseFrequency="0.01 0.01"
        numOctaves="2" result="turbulence" seed="1"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="75" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
    </filter>    
 </defs> 
        
       <!-- The image is processed by a filter and therefore overall dimensions have increased due to the height of the teeth -->
   <image   filter="url(#displacementFilter)" xlink:href="https://istack.dev59.com/kaYSe.webp" width="1700" height="850" />
    <rect mask="url(#msk1)" x="1700" y="0" width="50" height="900" fill="white" /> 
    <!-- The same original image, but without filters  -->
  <image x="0"  xlink:href="https://istack.dev59.com/kaYSe.webp" width="1700" height="850" />
</svg> 
</div> 

- Alexandr_TT