css - 我无法在 SVG 中构建此图像

Question

我要包装这个

里面

实现类似于

的结果

_{(来源:i.ibb.co)}

也就是说，T 恤应该沿着云的路径在云中裁剪。

我尝试使用 CSS 边框 mask ，但没有成功:

.wrapper {
  background-image:url('https://svgshare.com/i/T9J.svg');
  background-repeat:no-repeat;
  background-size:200px;
  background-position:50% 50%;
  width:200px;
}

.svg-border-mask {
  -webkit-mask-box-image: url('https://svgshare.com/i/T9J.svg');
  mask-border: url('https://svgshare.com/i/T9J.svg');
}

<div class="wrapper">
   <img src="/image/2GKtb.png" alt="" class="svg-border-mask" />
</div>

我该怎么做？我也读到了关于 clip-path 的方法，但我不知道如何绘制这个 SVG 路径...

Answer 1

使用 mask 而不是 mask-border 并应用与背景相同的属性以获得完美匹配:

.wrapper {
  background-image:url('https://i.ibb.co/KjmqTs2/cloud.png');
  background-repeat:no-repeat;
  background-size:200px;
  background-position:50% 50%;
  -webkit-mask: url('https://i.ibb.co/KjmqTs2/cloud.png');
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:200px;
  -webkit-mask-position:50% 50%;
  width:200px;
}
img {
  max-width:100%;
}

<div class="wrapper">
   <img src="/image/2GKtb.png" alt="" class="svg-border-mask" />
</div>

你也可以像下面这样简化:

img {
  --m:url('https://i.ibb.co/KjmqTs2/cloud.png') center/contain no-repeat;
 
  background:var(--m);
  -webkit-mask: var(--m);
  width:200px;
  padding:0 20px; /* some padding to control the shape */
}

<img src="/image/2GKtb.png" >

<img src="/image/2GKtb.png" style="width:100px;padding:0">

<img src="/image/2GKtb.png" style="width:100px;padding:0 30px">