剪辑路径背景图像

时间:2014-11-02 09:12:59

标签: html css svg

customshape

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

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

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

3 个答案:

答案 0 :(得分:0)

应该可以使用CSS Shapes。不幸的是,目前还没有浏览器支持(它仅适用于Safari和Chrome),因此您可能需要polyfill

我添加了一个小代码段,展示了如何使用您的图片。请注意,由于CORS问题,我不得不使用数据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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');
}
<div class="container">
  <img src="http://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>

答案 1 :(得分:0)

如果您想了解如何使用剪辑路径,可以在此处学习: http://css-tricks.com/almanac/properties/c/clip/

在这里: http://www.html5rocks.com/en/tutorials/masking/adobe/

或在此处使用生成器 -

http://cssplant.com/clip-path-generator

答案 2 :(得分:0)

There are tools out there可以帮助创建剪辑路径。

这是一个(相当粗略的) demo ,我用this tool掀起了:

div {
  width: 250px;
  height: 400px;
  float: left;
  background: tomato;
  -webkit-clip-path: polygon(74.67px 148.00px,105.00px 244.24px,145.67px 315.35px,181.33px 324.47px,159.67px 295.47px,149.50px 218.74px,172.33px 155.00px,165.17px 82.00px,132.00px 10.00px,68.83px 72.00px);
}
<div></div>