在HTML页面上，您可以使用CSS属性“float”使文本在图像周围流动。但这只会考虑图像的矩形，而不是图像中的透明区域。我现在有一个具有大面积完全透明度的图像，例如圆形徽标，并希望文本围绕该徽标的圆形轮廓流动，而不是边界矩形。至少在图像的面向文本方面。
我知道CSS可能不适合这项任务。但是有一些解决方法，比如隐藏的div或可以达到相同（或类似）效果的东西吗？有人已经看过这样的事吗？
答案 0 :(得分：1)
我现在已经为此编写了一个PHP函数。它采用PNG图像并生成＆lt; div＆gt;使文本围绕另一种形式流动的元素，而不是图像的矩形。你可以在这里找到代码：
答案 1 :(得分：0)
我真的怀疑你可以轻松地做到这一点，而不会造成一大堆，标签，JavaScript或两者兼而有之。我能想到的一种方法是将图像放在较大的zindex上，并在其后面放置div或div，文本将围绕它们流动。使用较小的矩形排除透明区域是最容易的。但那么为什么不剪裁/剪裁图像呢？或者你可以尝试在它后面浮动线高度div，但我想它会很快变得非常丑陋。或者您可以尝试将每行文本放在span / div中，并通过计算图像中的近似形状来手动或使用js进行定位。另一个想法，我不确定：可能可以使用svg做到这一点。但快速搜索并没有表现出太多的承诺。
还有一件事需要考虑，当做一些实验性的和复杂的事情时，无论你以何种方式做到这一点，在大多数浏览器中使其运行良好将极有可能是一件巨大的痛苦。
答案 2 :(得分：0)
有一个 css 属性可以满足您的需求 shape-outside 包括您可以使用的形状值。
https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/