带有图像的 CSS 形状遮罩答案

【问题标题】：CSS Shape masking with image带有图像的 CSS 形状遮罩
【发布时间】：2020-04-10 00:14:23
【问题描述】：

是否可以用这张图片屏蔽 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>

【问题讨论】：

除了更改坐标，并认识到左上角的正方形需要多边形而不是矩形之外，您需要我们帮助什么，您遇到了什么问题？
@DavidsaysreinstateMonica ，右下角的原始图像与右上角的图像重叠，我无法重新创建，因为 stoke 属性似乎不起作用

标签： html css svg clip-path

【解决方案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;
}

&lt;img src="https://picsum.photos/id/1028/300/300" &gt;

可以添加 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;
}

&lt;div class="box"&gt;&lt;/div&gt;

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

【讨论】：