Question

我做了这样的设计

如何使用css屏蔽背景？

我尝试过这样的代码

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我使用的蒙版图像是

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

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

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

Answer 1

首先，您需要在-webkit-mask-image中的两个面具之间切换。然后，您必须使用copy中的-webkit-mask-composite值。正如您可以阅读here：

源掩码图像替换目标掩码图像。

就像只有第一个蒙版上的透明部分才可见。

然后只需将位置调整到底部并使其仅在 x 上重复（仅对第一个蒙版需要），以便它适合任何图像宽度。

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

<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>

您可能还注意到您使用的这些属性不在标准中，因此最好使用所有浏览器支持的内容，例如多个背景图像，伪元素等。

Answer 2

SVG +过滤器解决方案

用于在图像中创建锯齿状边缘的SVG解决方案不需要使用带有锯齿状边缘的图案的光栅图像。因此，该SVG解决方案可以应用于任何图像并使其具有自适应性。

请考虑使用同一图像2次创建锯齿状边缘。滤镜应用于较低的图像，因此，它会变大一些。原始图像叠加在顶部，因此边缘上的牙齿变得可见。为了只让牙齿留在下边框上，我们在侧面边框上用面罩切掉了不必要的牙齿。

.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://i.stack.imgur.com/paWbQ.jpg.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://i.stack.imgur.com/paWbQ.jpg.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://i.stack.imgur.com/kaYSe.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://i.stack.imgur.com/kaYSe.jpg" width="1700" height="850" />
</svg>	
</div>

用CSS掩盖图像

2 个答案: