logo标签列表

有没有一种方法可以使HTML文本围绕图片流动 - 关于透明度？

htmlcsslayouttext
4
在HTML页面上，您可以使用CSS属性“float”使文本环绕图像。但是，这只会考虑到图像的矩形区域，而不会考虑图像中的透明区域。现在我有一张图片，其中有大面积的全透明区域，比如一个圆形标志，希望文字能够沿着标志圆周流动，而不是沿着边界矩形流动，至少在面向文本的一侧是这样。
我知道CSS可能不适用于这项任务。但是否有一些解决方法，比如隐藏div之类的东西，可以实现相同（或类似）的效果？有人看到过这样的东西吗？
你可以尝试使用The Box Office，如果它不能完全满足你的需求，你至少可以学习并应用那里的技术。 - lsuarez
相关视频：http://blogs.adobe.com/designandweb/2010/10/improving-the-web-for-digital-publishing.html 期待看到主流浏览器引擎实现这一点。 - user123444555621
3个回答
1

我现在已经编写了一个 PHP 函数。它接受 PNG 图像并生成 <div> 元素，以使文本沿着不同于图像矩形的其他表单流动。您可以在此处找到代码：

https://unclassified.software/source/shaped-image-flow

更新 2020/2021:

现在有一个 CSS 属性可以实现这个效果：shape-outside。它可以使用带有透明度的图像来确定文本环绕的外部形状。如果可见图像已经是 PNG 格式，那么同一图像可以用于此 CSS 属性。可以使用 shape-margin 添加额外的边距。除了 IE 之外，所有浏览器都支持这两个属性。

示例：

<img src="img/shape.png" style="shape-outside: url(img/shape.png); shape-margin: 1.5em;">
0

我真的怀疑你可以轻松地做到这一点，而不会弄乱标记、JavaScript或两者兼有。我能想到的一种方法是将图像放在更大的 z 轴索引上，并将 div 或 divs 定位在其后面，文字将围绕它们流动。最容易使用排除透明区域的较小矩形。但为什么不直接裁剪/剪辑图像呢？另外，您可以尝试在背后浮动行高 divs，但我猜它很快就会变得相当丑陋。或者，您可以尝试将每行文本放入 span/div，并通过计算与图像中所需形状的近似值来手动或使用 js 定位它们。我不确定的另一个想法是可能可以使用 svg 来实现这一点。但是，快速搜索并没有显示出太大的希望。

无论以何种方式进行这样的实验性和复杂的操作，还有一件事要考虑：在进行跨大多数浏览器的良好工作方面，这很可能会非常麻烦。

0
谢谢提醒。虽然你提供的链接并没有回答我的问题，但是它可以被改进以解决问题。实际上，我去年就已经发现了这一点。因此，我已经更新了我的答案以反映新的可能性。 - ygoe
很好，很高兴能够帮到您。 - proger
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接