css3 – 有没有办法从CSS中的任何图像创建一个复杂的多边形形状,用于区域属性?

前端之家收集整理的这篇文章主要介绍了css3 – 有没有办法从CSS中的任何图像创建一个复杂的多边形形状,用于区域属性?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图找到一种将任何黑色图像转换成多边形形状的方法

我要解决的问题包括两个步骤:

>将图像转换为多边形
>用文字填充多边形

我正在努力的第一步。因为我还没有找到任何“转换器”,我唯一想到的是将图像转换为SVG格式(如果它不是SVG格式),然后获取矢量数据并粘贴到CSS的右侧多边形(类似于Raphaël.js)。

这是唯一的办法吗?

约束:

>我不想让大量的div将会形成一个形状。
>我不想使用JavaScript来执行此任务。
>如果形状复杂,则必须是多边形。

以下是我要做的事情的例子(我只对复杂的多边形感兴趣)。

我应该使用哪些类型的方法提示

从Adobe获取的图像:http://adobe.github.com/web-platform/samples/css-exclusions/

解决方法

您可以使用图像进行盒子屏蔽this article中的详细信息和此 link中的示例(仅限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>

结果:

**编辑**

摩尔关闭前卫技术!

你需要到http://html.adobe.com/webplatform/enable/在铬或铬金丝雀部分你会发现一行说:

To enable Shapes,Regions,and Blend Modes:

  • Copy and paste chrome://flags/#enable-experimental-web-platform-features into the
    address bar,then press enter.
  • Click the ‘Enable’ link within that section.
  • Click the ‘Relaunch Now’ button at the bottom of the browser window.

Note: Multiple features can be enabled before relaunching.

这里是龙!

如果您有足够的勇气,激活实验功能,您将受到图像中强大的形状的一切重视!哇:)

在这里你有一个示例笔,只有当你激活了实验功能=> http://codepen.io/anon/pen/yhIbE

如果一切顺利,你可能会在后面的段落中看到一个鸭子的剪影和一只鸭子,它们都没有剪切或剪切,它包含所有的文字;)

这一切都非常实验,但有一天,您将能够在所有浏览器中执行此类操作,因为本文中详细介绍的每个方面都在W3C草案中。

> Shape inside with data uris and images
> Shape alpha channel treeshold

干杯!

编辑:

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

猜你在找的CSS相关文章