logo标签列表

CSS中是否有一种方法可以从任何图像创建复杂的多边形形状，以在区域属性中使用？

csspolygonregions
18
我正在寻找一种将任何黑色图像转换为多边形的方法。
我尝试解决的问题包括两个步骤：
1. 将图像转换为多边形。 2. 用文本填充多边形。
我正在努力解决第一步。由于我没有找到任何“转换器”，我唯一的想法是将图像转换为SVG格式（如果它不是SVG），然后获取矢量数据并将其粘贴到CSS多边形形状内部（类似于Raphaël.js）。
这是唯一的方法吗？
限制条件：
- 我不想使用大量div来构成一个形状。 - 我不想使用JavaScript完成此任务。 - 如果形状复杂，则必须是多边形。
以下是我要做的示例（我只对复杂多边形感兴趣）。

有什么关于应该使用哪种方法的提示吗？

图片来源于Adobe: http://adobe.github.com/web-platform/samples/css-exclusions/

遗憾的是，这个功能仍未实现。这篇文章提供了更多关于即将到来的能力的洞见，这些能力使用CSS区域类似于您想要的。 - Zach Saucier
这篇文章几乎回答了我的问题：http://sarasoueidan.com/blog/css-regions-with-shapes-for-readability/index.html - achudars
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>

结果：

enter image description here

** 编辑 **

更多高端科技！

你需要前往http://html.adobe.com/webplatform/enable/在Chrome或Chrome Canary部分找到以下这一行：

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

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

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

龙穴之地！！

如果你足够勇敢，激活实验性功能，你将承受来自强大图像造型的所有惊奇！哇：）

这里有一个样本针尖，仅在激活实验性功能后才能工作 => http://codepen.io/anon/pen/yhIbE

如果一切顺利，您可能会看到一只鸭子轮廓和一个在后面的段落中的鸭子，它们不是被截断或裁剪的，而是有所有文本包装；）

enter image description here

这都非常实验性，但有一天您将能够在所有浏览器中做到这样的事情，因为本文章详细介绍的每个方面都在W3C草案中。

干杯！

编辑：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接