时间戳

首页 > 解决方案 > 我需要混合 CSS 形状作为图像的背景，图像应该适合形状

html - 我需要混合 CSS 形状作为图像的背景，图像应该适合形状

问题描述

我需要一些关于 CSS 的帮助。我有形状，我有照片。我需要用 HTML 和 CSS 的形状创建某种蒙版或背景，当有人添加新图片时，它应该看起来像第三张图片。我需要自动将人物图像适合形状

占位符

人

最后结果

标签： htmlcss

解决方案

svg{
  width:50%;
}
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="https://i.stack.imgur.com/s3wuV.jpg" x="-25" width="150" height="100" />
    </pattern>
  </defs>
  <polygon points=" 50 1 95 25 95 75 50 99 5 75 5 25" stroke-linejoin="round" fill="url(#img)"  />
   
</svg>

推荐阅读