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>

Answer 1

使用CSS掩码你可以这样做：

body {
  margin:0;
  background:grey;
}  
img {
  -webkit-mask:
    /* top right part*/
    linear-gradient(#fff,#fff) calc(82% + 10px) calc(33% - 10px)/35% 25%,
    /* bottom left part*/
    linear-gradient(#fff,#fff) calc(34% - 10px) calc(80% + 10px)/25% 25%,
    /* Top left part */
    linear-gradient(#fff,#fff) top left/calc(50% - 10px) calc(50% + 30px),
    linear-gradient(#fff,#fff) top left/calc(50% + 10px) calc(50% - 10px),
    /* Bottom right part*/
    linear-gradient(#fff,#fff) bottom right/50% 50%;
  mask:
    /* top right part*/
    linear-gradient(#fff,#fff) calc(82% + 10px) calc(33% - 10px)/35% 25%,
    /* bottom left part*/
    linear-gradient(#fff,#fff) calc(34% - 10px) calc(80% + 10px)/25% 25%,
    /* Top left part */
    linear-gradient(#fff,#fff) top     left/calc(50% - 10px) calc(50% + 30px),
    linear-gradient(#fff,#fff) top     left/calc(50% + 10px) calc(50% - 10px),
    /* Bottom right part*/
    linear-gradient(#fff,#fff) bottom right/50% 50%;
  -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 */
  -webkit-mask:
    /* top right part*/
    linear-gradient(#fff,#fff) calc(84.5% + var(--g)) calc(33.5% - var(--g))/35% 25%,
    /* bottom left part*/
    linear-gradient(#fff,#fff) calc(34% - var(--g)) calc(80% + var(--g))/25% 25%,
    /* Top left part */
    linear-gradient(#fff,#fff) top left/calc(50% - var(--g)) 60%,
    linear-gradient(#fff,#fff) top left/55% calc(50% - var(--g)),
    /* Bottom right part*/
    linear-gradient(#fff,#fff) bottom right/50% 50%;
  mask:
    /* top right part*/
    linear-gradient(#fff,#fff) calc(84.5% + var(--g)) calc(33.5% - var(--g))/35% 25%,
    /* bottom left part*/
    linear-gradient(#fff,#fff) calc(34% - var(--g)) calc(80% + var(--g))/25% 25%,
    /* Top left part */
    linear-gradient(#fff,#fff) top left/calc(50% - var(--g)) 60%,
    linear-gradient(#fff,#fff) top left/55% calc(50% - var(--g)),
    /* Bottom right part*/
    linear-gradient(#fff,#fff) bottom right/50% 50%;
  -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>

要了解我使用的所有百分比值背后的逻辑，请查看：Using percentage values with background-position on a linear-gradient

CSS 使用图像进行形状遮罩

CSS Shape masking with image

html

css

svg

clip-path