CSS图形遮罩与图片

Question

是否可以用这张图片来遮盖 DIV 的形状？

这就是我想要实现的效果：

目前为止，我使用了 SVG 标签，但它并没有给我精确的输出：

代码：

<svg viewBox="0 0 643 525">
  <defs>
    <clipPath id="shape">
      <rect width="150" height="200" style="fill:rgb(0,0,255);stroke-width:5" />
      <rect x="160" y="100" width="150" height="100" style="fill:rgb(0,0,255);stroke-width:5" />
      <rect x="50" y="210" width="100" height="80" />
      <rect x="160" y="210" width="225" height="190" />
    </clipPath>
  </defs>
  <image width="643" height="343" clip-path="url(#shape)" xlink:href="../assets/images/crain.png" x="-50"></image>
</svg>

- Thanveer Shah

---

除了更改坐标并认识到您需要一个多边形而不是左上角的矩形之外，您还需要我们的帮助解决什么问题？您遇到了什么问题？ - David Thomas

@DavidsaysreinstateMonica，原始图像右下角的图像与右上角的图像重叠，我无法重新创建它，因为描边属性似乎不起作用。 - Thanveer Shah

Answer 1

使用CSS遮罩，您可以做到这一点：

body {
  margin:0;
  background:grey;
}  
img {
  --_m:
    /* top right part*/
    linear-gradient(#000 0 0) calc(82% + 10px) calc(33% - 10px)/35% 25%,
    /* bottom left part*/
    linear-gradient(#000 0 0) calc(34% - 10px) calc(80% + 10px)/25% 25%,
    /* Top left part */
    linear-gradient(#000 0 0) top left/calc(50% - 10px) calc(50% + 30px),
    linear-gradient(#000 0 0) top left/calc(50% + 10px) calc(50% - 10px),
    /* Bottom right part*/
    linear-gradient(#000 0 0) bottom right/50% 50%;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

<img src="https://picsum.photos/id/1028/300/300" >

你可以添加CSS变量来控制间隔。

body {
  margin:0;
  background:grey;
}  
img {
  margin:5px;
  --g: 10px; /* the gap */
  --_m:
    /* top right part*/
    linear-gradient(#000 0 0) calc(84.5% + var(--g)) calc(33.5% - var(--g))/35% 25%,
    /* bottom left part*/
    linear-gradient(#000 0 0) calc(34% - var(--g)) calc(80% + var(--g))/25% 25%,
    /* Top left part */
    linear-gradient(#000 0 0) top left/calc(50% - var(--g)) 60%,
    linear-gradient(#000 0 0) top left/55% calc(50% - var(--g)),
    /* Bottom right part*/
    linear-gradient(#000 0 0) bottom right/50% 50%;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

<img src="https://picsum.photos/id/1028/300/300" style="--g:20px">

<img src="https://picsum.photos/id/90/250/250" >

<img src="https://picsum.photos/id/102/200/200" style="--g:4px" >

为了理解这个技巧，可以在一个div元素上使用渐变作为背景来查看拼图。由于我使用的是白色，所以遮罩只会显示渐变部分：

body {
  margin:0;
  background:grey;
}  
.box {
  width:300px;
  height:300px;
  border:1px solid;
  --g:10px; /* the gap */
  background:
    /* bottom left part*/
    linear-gradient(red,red) calc(84.5% + var(--g)) calc(33.5% - var(--g))/35% 25%,
    /* bottom left part*/
    linear-gradient(blue,blue) calc(34% - var(--g)) calc(80% + var(--g))/25% 25%,
    /* Top left part */
    linear-gradient(green,green) top left/calc(50% - var(--g)) 60%,
    linear-gradient(yellow,yellow) top left/55% calc(50% - var(--g)),
    /* Bottom right part*/
    linear-gradient(purple,purple) bottom right/50% 50%;
  background-repeat:no-repeat;
}

<div class="box"></div>

为了理解我使用的所有百分比值背后的逻辑，请查看：在线性渐变中使用background-position的百分比值。

- Temani Afif