主页 / 问题 / 1601526
Accepted
Евгения
Asked:2024-12-03 16:26:57 +0000 UTC2024-12-03 16:26:57 +0000 UTC

如何使用 css mask 制作这样的形状？

  • 772

告诉我，是否可以使用 CSS 制作这样的遮罩，以便将来您可以插入任何照片？ 在此输入图像描述

html

2 个回答

  1. Best Answer

    我们在 Corel 中创建以下形状的曲线并将其另存为.png和.svg。这是一个封闭的图形，充满黑色。

    摄影遮罩

    然后我们通过以下方式将该文件指定png为掩码css：

    img {
    mask: url(https://isstatic.askoverflow.dev/cWUEWhKg.png);
    mask-size: cover;
}
    <img src="https://isstatic.askoverflow.dev/iDgYDYj8.png">

    或者我们指定svg这样一个简单的类型作为掩码。这是“文件的文本” svg（无法将其作为答案的外部文件上传到某处）。但结果是一样的，但界限清晰。

    img {
  mask: url(./mask.svg);
  mask-size: cover;
}
    <svg xmlns="http://www.w3.org/2000/svg" width="350px" height="400px" viewBox="0 0 350 400">

  <path d="M37.76 19.02c41.72,-33.16 86.23,-12.77 137.24,-13.3 51.01,0.53 95.52,-19.86 137.24,13.3 36.14,28.72 42.24,90.93 35.19,193.44 -7.31,106.24 -16.44,121.99 -48.36,160.59 -14.77,17.86 -64.62,28.52 -124.07,26.76 -59.46,1.76 -109.3,-8.9 -124.07,-26.76 -31.92,-38.6 -41.05,-54.35 -48.36,-160.59 -7.05,-102.51 -0.95,-164.72 35.19,-193.44z"/>

</svg>

    例如，使用mask-position和mask-size可以将遮罩调整到中心，并将其调整为所需的尺寸。事实证明，它是一个通用的照片遮罩，无论有多少张。

    UPD。您可以从文本创建 URLsvg并分配mask-image。这更多的是模拟外部svg文件作为遮罩的操作：

    const svg = `<svg id="mask" xmlns="http://www.w3.org/2000/svg" width="350px" height="400px" viewBox="0 0 350 400">

<path d="M37.76 19.02c41.72,-33.16 86.23,-12.77 137.24,-13.3 51.01,0.53 95.52,-19.86 137.24,13.3 36.14,28.72 42.24,90.93 35.19,193.44 -7.31,106.24 -16.44,121.99 -48.36,160.59 -14.77,17.86 -64.62,28.52 -124.07,26.76 -59.46,1.76 -109.3,-8.9 -124.07,-26.76 -31.92,-38.6 -41.05,-54.35 -48.36,-160.59 -7.05,-102.51 -0.95,-164.72 35.19,-193.44z"/>

</svg>`;

const svg_url = `data:image/svg+xml;base64,${btoa(svg)}`;

document.getElementById('photo').style.maskImage = `url(${svg_url})`;
    img {
    mask-size: cover;
}
    <img id="photo" src="https://isstatic.askoverflow.dev/iDgYDYj8.png">

    • 4

  2. 告诉我，是否可以使用 CSS 制作这样的遮罩，以便将来您可以插入任何照片？

    换句话说，您不需要插入照片，而是根据给定的曲线图案对其进行裁剪。在CSS中，图像裁剪不是通过遮罩执行的，
    而是通过clip-path执行的

    在 CSS 中创建曲线图案是clip-path有问题的，而且是劳动密集型的。
    但 SVG 可以轻松处理这个任务。

    在矢量编辑器中，根据给定模式创建曲线模板（路径）：

    在此输入图像描述

    然后使用 SVG mask 剪切出图像的一个片段：

    .img {
mask:url(#msk);
} 
.container {
width:50vw;
height:50vh;
}
    <div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" 
 viewBox="0 0 760 860" version="1.1"  style="border:0px solid red">
 <mask id="msk" > 
 
   <path id="p1"   fill="white" d="M45.6 798C20.3 722.3 20 630.9 12.8 546.7c-4.6-52.3-6-105-7.1-157.4C4.6 338.4 3.3 289 5.9 237 9.5 165 9.5 50 71.1 31 122.8 0 194 1.7 249.6 1.8c18.7 1 37.1 4.6 55.7 6.6 13.3 1.4 26.6 3.2 40 3.9 19.7.9 39.5 1 59.2 0 33.7-2 66.9-9.7 100.5-11.6 19.3-1.2 38.7-.7 58 0 19 .6 38.1.2 56.7 3.8 22.7 4.5 47 8.3 65.7 22C706.6 41.8 721.4 66 732 90c14.5 32.7 17.6 69.6 21.7 105.2 6.9 59.5 4.8 119.8 4.8 179.8 0 54.5-.8 110.4-4.2 163.4-2 31.9-3.6 63.8-5.4 95.7-1.8 30.3-2.4 60.8-5.5 91 1 51.4-21.5 89-76.5 107.6-44.8 17.3-94.2 21-142.2 23.7-52.5 3-105-7.6-157.6-8.2-54.3-.7-109.7.8-163 4.5-23.7 1.7-63.8 10.6-93 0-26.7-9.7-56.6-27.6-65.5-54.6z" > 
  </path>
</mask> 

 <image class="img"  xlink:href="https://isstatic.askoverflow.dev/rU0Ewb7k.png" width="100%" height="100%" /> 
</svg>  
</div>

    • 1

相关问题