18

我正在尝试找到一种将任何黑色图像转换为多边形形状的方法。

我试图解决的问题包括两个步骤：

  1. 将图像转换为多边形
  2. 用文本填充多边形

我正在努力迈出第一步。因为我还没有找到任何“转换器”，所以我剩下的唯一想法是将图像转换为 SVG 格式（如果它还不是 SVG），然后获取矢量数据并将其粘贴到 CSS 中多边形形状（类似于 Raphaël.js）。

这是唯一的方法吗？

约束：

  • 我不想制作大量构成形状的 div。
  • 我不想为这项任务使用 JavaScript。
  • 如果形状很复杂，它必须是多边形。

下面是我正在尝试做的示例（我只对复杂的多边形感兴趣）。

关于我应该使用的方法类型的任何提示？

图片取自 Adob​​e： http: //adobe.github.com/web-platform/samples/css-exclusions/

4

1 回答 1

4

您可以使用图像进行框屏蔽、本文中的详细信息和此链接中的示例（仅限 webkit 示例）

<style type="text/css">
.wrap {
  height:400px;
  width:800px;
  -webkit-mask-box-image:url('silhouette.png');
}
</style>
<div class="wrap">Large lipsum here...</div>

结果 ：

在此处输入图像描述

** 编辑 **

摩尔关闭前卫技术！

您需要在 chrome 或 chrome canary 部分访问http://html.adobe.com/webplatform/enable/，您会发现一行内容：

要启用形状、区域和混合模式：

  • 将 chrome://flags/#enable-experimental-web-platform-features 复制并粘贴到地址栏中，然后按 Enter。
  • 单击该部分中的“启用”链接。
  • 单击浏览器窗口底部的“立即重新启动”按钮。

注意：可以在重新启动之前启用多个功能。

这里是龙！

如果你足够勇敢，激活实验功能，你将遭受来自图像的强大形状的所有可怕！哇 :)

在这里，您有一个示例笔，只有在您激活实验功能时才能使用 => http://codepen.io/anon/pen/yhIbE

如果一切顺利，您可能会在后面的段落中看到鸭子的剪影和鸭子，而且它们都没有被剪裁或剪裁，所有文字都被包裹起来；）

在此处输入图像描述

这一切都是实验性的，但有一天你将能够在所有浏览器中做这样的事情，因为这篇文章中详述的每个方面都在 W3C 草案中。

干杯!

编辑 ：

找到一篇关于这个主题的好文章：http: //hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html

于 2014-02-18T13:30:16.970 回答