blocks|key|197417|text|您可以使用图片进行框遮罩，详细信息在this+article中，示例在此link中(仅限webkit示例)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|197418|<style+type="text/css">
.wrap+{
++height:400px;
++width:800px;
++-webkit-mask-box-image:url('silhouette.png');
}
</style>
<div+class="wrap">Large+lipsum+here...</div>|code-block|syntax|javascript|197419|结果：|197420|​|197421|📷|atomic|197422|197423|**编辑**|197424|摩尔接近前卫的技术！|197425|您需要转到http://html.adobe.com/webplatform/enable/，在chrome或chrome金丝雀部分，您将找到一行内容：|197426|启用形状、区域和混合模式的|197427|：|blockquote|197428|197429|197430|将chrome://flags/#enable-experimental-web-platform-features复制并粘贴到地址栏中，然后按enter键。|197431|单击该地址栏中的“Enable”链接，然后单击浏览器窗口底部的“Relaunch”按钮。|unordered-list-item|197432|197433|注意:重新启动前可以启用多个功能。|197434|龙来了！！|197435|如果你足够勇敢，激活实验功能，你将遭受图像中强大形状的所有惊人之处！哇:)|197436|这里有一支样笔，只有在您激活了=>+http://codepen.io/anon/pen/yhIbE的实验功能后才能使用|197437|如果一切顺利，你可能会在后面的段落中看到一只鸭子的剪影和一只鸭子，而且都没有被剪切或裁剪，所有的文本都被包裹了;)|197438|197439|197440|197441|这一切都是实验性的，但总有一天你将能够在所有浏览器中做这样的事情，因为这篇文章中详细介绍的每一个方面都在W3C草案中。|197442|197443|Shape+inside+with+data+uris+and+images|197444|Shape+alpha+channel+treeshold|197445|197446|干杯!|197447|编辑：|197448|找到一篇关于这个主题的很好的文章：http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html|197449|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Masks/Masks.html|1|http://codepen.io/anon/pen/owtxp|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/f2634737e55ef9d9e4bbffc0b7ce6972.png|imageAlt|3|http://html.adobe.com/webplatform/enable/|4|http://codepen.io/anon/pen/yhIbE|5|https://ask.qcloudimg.com/http-save/yehe-900000/c993ebced1a3ea5ab90f26e0bde5e1a3.png|6|http://dev.w3.org/csswg/css-shapes-2/#lturigt|7|http://dev.w3.org/csswg/css-shapes-2/#shape-image-threshold-property|8|http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html^0|I|C|0|10|4|1|0|0|0|0|0|1|2|0|0|0|0|5|15|3|0|0|0|0|0|0|0|0|0|0|0|I|W|4|0|0|0|0|1|5|0|0|0|0|0|12|6|0|0|T|7|0|0|0|0|H|24|8|0^^$0|@$1|2|3|4|5|6|7|2S|8|@]|9|@$A|2T|B|2U|1|2V]|$A|2W|B|2X|1|2Y]]|C|$]]|$1|D|3|E|5|F|7|2Z|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|30|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|31|8|@]|9|@]|C|$]]|$1|M|3|N|5|O|7|32|8|@]|9|@$A|33|B|34|1|35]]|C|$]]|$1|P|3|L|5|6|7|36|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|37|8|@]|9|@]|C|$]]|$1|S|3|T|5|6|7|38|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|39|8|@]|9|@$A|3A|B|3B|1|3C]]|C|$]]|$1|W|3|X|5|6|7|3D|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|10|7|3E|8|@]|9|@]|C|$]]|$1|11|3|-4|5|6|7|3F|8|@]|9|@]|C|$]]|$1|12|3|-4|5|6|7|3G|8|@]|9|@]|C|$]]|$1|13|3|14|5|6|7|3H|8|@]|9|@]|C|$]]|$1|15|3|16|5|17|7|3I|8|@]|9|@]|C|$]]|$1|18|3|-4|5|6|7|3J|8|@]|9|@]|C|$]]|$1|19|3|1A|5|6|7|3K|8|@]|9|@]|C|$]]|$1|1B|3|1C|5|6|7|3L|8|@]|9|@]|C|$]]|$1|1D|3|1E|5|6|7|3M|8|@]|9|@]|C|$]]|$1|1F|3|1G|5|6|7|3N|8|@]|9|@$A|3O|B|3P|1|3Q]]|C|$]]|$1|1H|3|1I|5|6|7|3R|8|@]|9|@]|C|$]]|$1|1J|3|L|5|6|7|3S|8|@]|9|@]|C|$]]|$1|1K|3|N|5|O|7|3T|8|@]|9|@$A|3U|B|3V|1|3W]]|C|$]]|$1|1L|3|L|5|6|7|3X|8|@]|9|@]|C|$]]|$1|1M|3|1N|5|6|7|3Y|8|@]|9|@]|C|$]]|$1|1O|3|-4|5|6|7|3Z|8|@]|9|@]|C|$]]|$1|1P|3|1Q|5|17|7|40|8|@]|9|@$A|41|B|42|1|43]]|C|$]]|$1|1R|3|1S|5|17|7|44|8|@]|9|@$A|45|B|46|1|47]]|C|$]]|$1|1T|3|-4|5|6|7|48|8|@]|9|@]|C|$]]|$1|1U|3|1V|5|6|7|49|8|@]|9|@]|C|$]]|$1|1W|3|1X|5|6|7|4A|8|@]|9|@]|C|$]]|$1|1Y|3|1Z|5|6|7|4B|8|@]|9|@$A|4C|B|4D|1|4E]]|C|$]]|$1|20|3|-4|5|6|7|4F|8|@]|9|@]|C|$]]]|21|$22|$5|23|24|25|C|$26|27]]|28|$5|23|24|25|C|$26|29]]|2A|$5|2B|24|2C|C|$2D|2E|2F|-4]]|2G|$5|23|24|25|C|$26|2H]]|2I|$5|23|24|25|C|$26|2J]]|2K|$5|2B|24|2C|C|$2D|2L|2F|-4]]|2M|$5|23|24|25|C|$26|2N]]|2O|$5|23|24|25|C|$26|2P]]|2Q|$5|23|24|25|C|$26|2R]]]]

You can use a image for box masking, details in <a href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Masks/Masks.html" rel="nofollow noreferrer">this article</a> and a sample in this <a href="http://codepen.io/anon/pen/owtxp" rel="nofollow noreferrer">link</a> (webkit sample only)

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

Result : 

<img src="https://i.stack.imgur.com/zpq19.png" alt="enter image description here">

** EDIT ** 

Moar close edgy techs!!

You need to go to <a href="http://html.adobe.com/webplatform/enable/" rel="nofollow noreferrer">http://html.adobe.com/webplatform/enable/</a> in the chrome or chrome canary section you will find a line that says :

<blockquote>
 To enable Shapes, Regions, and Blend Modes:
 
 <ul>
 <li>Copy and paste chrome://flags/#enable-experimental-web-platform-features into the
 address bar, then press enter.</li>
 <li>Click the 'Enable' link within that section.</li>
 <li>Click the 'Relaunch Now' button at the bottom of the browser window.</li>
 </ul>
 
 Note: Multiple features can be enabled before relaunching.
</blockquote>

Here be dragons!!

If you are brave enough, activate experimental features and you will suffer all the awosemeness of the mighty shapes from images! woow :)

here you have a sample pen that will only work when you had activated the experimental features => <a href="http://codepen.io/anon/pen/yhIbE" rel="nofollow noreferrer">http://codepen.io/anon/pen/yhIbE</a>

If it all went ok, you might see a duck silhouette and a duck in the later paragraph, and it is all not cutted or clipped it has all text wrapped ;)

<img src="https://i.stack.imgur.com/K76k2.png" alt="enter image description here">

It's all very experimental, but some day you will be able to do such things in all browsers, because every aspect detailed in this post is in the W3C draft.

<ul>
<li><a href="http://dev.w3.org/csswg/css-shapes-2/#lturigt" rel="nofollow noreferrer">Shape inside with data uris and images</a></li>
<li><a href="http://dev.w3.org/csswg/css-shapes-2/#shape-image-threshold-property" rel="nofollow noreferrer">Shape alpha channel treeshold</a></li>
</ul>

Cheers!

EDIT :

Found a nice article about the subject : <a href="http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html" rel="nofollow noreferrer">http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html</a>

I'm trying to find a way to convert any black image into a polygon shape.

The problem I'm trying to solve consists of two steps:

<ol>
<li>Convert image into a polygon</li>
<li>Fill the polygon with text</li>
</ol>

I'm struggling with the first step. As I haven't found any "converter" the only idea I am left with is to convert an image into an SVG format (if it isn't an SVG already), then fetch the vector data and paste it in right inside the CSS polygon shape (similarly as done with Raphaël.js).

Is this the only approach?

Constraints:

<ul>
<li>I do not want to make tons of divs that will make up a shape.</li>
<li>I do not want to use JavaScript for this task.</li>
<li>If a shape is complex it must be a polygon.</li>
</ul>

Below are examples of what I'm trying to do (I'm interested only in complex polygons).

<img src="https://i.stack.imgur.com/8rQxP.jpg" alt="">

<img src="https://i.stack.imgur.com/wEj3m.png" alt="">

Any tips on types of approaches I should use?

Images taken from Adobe: <a href="http://adobe.github.com/web-platform/samples/css-exclusions/" rel="nofollow noreferrer">http://adobe.github.com/web-platform/samples/css-exclusions/</a>

Is there a way to create a complex polygon shape from any image in CSS for use in regions property?

我正在尝试找到一种方法来将任何黑色图像转换为多边形形状。我试图解决的问题包括两个步骤：将图像转换为多边形填充多边形我正在努力迈出第一步。由于我还没有找到任何“转换器”，我唯一的想法是将图像转换为SVG格式(如果它还不是SVG格式)，然后获取矢量数据并将其粘贴到CSS多边形形状中(类似于Raphaël.js)。这是唯一的...

问有没有办法从CSS中的任何图像创建复杂的多边形形状，以便在regions属性中使用？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法从CSS中的任何图像创建复杂的多边形形状，以便在regions属性中使用？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法从CSS中的任何图像创建复杂的多边形形状，以便在regions属性中使用？
EN