剪辑路径背景图像

gur*_*dev 5 html css svg

定制形状

假设我将上面的图像作为 div 的背景。我可以将这个 div 中的所有内容剪裁到图像的边界吗?

我搜索并找到了我认为最合适的剪辑路径方式,但我不知道如何定义该图像的路径。我想过用canvas来制作它,但问题是这个div内的元素。

如果有人对此类员工有一些经验,我将非常感谢您的帮助

cku*_*jer 2

使用CSS Shapes应该可以。不幸的是,浏览器支持尚不存在(它仅适用于 Safari 和 Chrome),因此您可能需要一个polyfill

我添加了一个小代码片段,展示了它如何使用您的图像进行工作。请注意,由于CORS问题,我必须使用 data-uri 内联图像。

body {
  font-family: Helvetica, Arial;
  color: #333;
}
.container {
  width: 500px;
  margin: 0 auto;
}
.shape {
  float: left;
  shape-margin: 10px;
  shape-outside: url('data:image/png;base64,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');
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <img src="https://i.stack.imgur.com/5b0qi.png" class="shape" />
  <div class="text">
    <p>
      Bacon ipsum dolor amet rump kielbasa kevin tail. Chuck sirloin bresaola, swine andouille ham hock meatloaf pancetta jerky meatball corned beef shankle ribeye chicken beef ribs. Tenderloin pastrami sirloin corned beef, short ribs pancetta shoulder chicken
      porchetta ham ball tip kielbasa. Tri-tip porchetta meatloaf ground round sausage, pork loin shankle chicken. Turkey beef ribs capicola andouille pancetta. Beef ribs kevin venison ham ham hock sirloin, rump fatback shankle pork chop pastrami tri-tip
      andouille.
    </p>
    <p>
      Doner chicken bacon short ribs venison salami andouille biltong pig. Turkey bacon andouille shoulder kevin. Ham hock rump bacon corned beef, t-bone kevin tongue jerky meatball ground round ribeye tri-tip. Turkey swine bresaola prosciutto beef, porchetta
      short ribs drumstick. Meatball pork ribeye ham hock venison turducken.
    </p>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)