是否有任何现代方法可以将文本环绕在透明图像周围？
Posted
技术标签:
【中文标题】是否有任何现代方法可以将文本环绕在透明图像周围？【英文标题】：Is there any modern way to wrap text around a transparent image? 【发布时间】：2020-06-07 10:05:47 【问题描述】：我一直在尝试将其重新创建为网页https://imgur.com/a/sgCHAe1
如您所见，植物的描述与图像的边界框相互作用。由于我希望此网页能够显示动态内容，因此为每种植物设计形状多边形并不是一种可扩展的方法。
我的第一个方法是使用 jQuery 插件 jQSlickWrap，它确实有效（https://imgur.com/a/dqEarb3，上面的字段与动态生成的图像边界框交互，但文本没有）。这带来了一些问题，主要是：
A）我还没有找到任何增加和偏移图像的方法（重新创建模型的效果）
B) 描述不与图像交互
我认为我可以通过 js 修复文本，剪切 p 元素并在它与图像碰撞时创建一个新元素，但我认为这太过分了。 jQSlickWrap 是否有任何现代替代品可以使用，或者我没有正确使用该插件？
=======
注意事项：
我将 MetroUI 4 用于网格系统 另外我正在使用 Django 作为后端，如果它有任何帮助的话html：
<html lang="es" class="metro-no-touch-device"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
<style></style></head>
<body>
<div style="background-image: url("data:image/png;base64,//Lots of data//");background-position: right top;background-repeat: no-repeat;min-height: 881px;background-size: auto;"><div style="width: 495px; float: right; height: 20px; clear: right"></div><div style="width: 505px; float: right; height: 20px; clear: right"></div><div style="width: 502px; float: right; height: 20px; clear: right"></div><div style="width: 609px; float: right; height: 20px; clear: right"></div><div style="width: 637px; float: right; height: 20px; clear: right"></div><div style="width: 643px; float: right; height: 20px; clear: right"></div><div style="width: 643px; float: right; height: 20px; clear: right"></div><div style="width: 726px; float: right; height: 20px; clear: right"></div><div style="width: 732px; float: right; height: 20px; clear: right"></div><div style="width: 745px; float: right; height: 20px; clear: right"></div><div style="width: 747px; float: right; height: 20px; clear: right"></div><div style="width: 749px; float: right; height: 20px; clear: right"></div><div style="width: 769px; float: right; height: 20px; clear: right"></div><div style="width: 781px; float: right; height: 20px; clear: right"></div><div style="width: 782px; float: right; height: 20px; clear: right"></div><div style="width: 779px; float: right; height: 20px; clear: right"></div><div style="width: 744px; float: right; height: 20px; clear: right"></div><div style="width: 733px; float: right; height: 20px; clear: right"></div><div style="width: 772px; float: right; height: 20px; clear: right"></div><div style="width: 782px; float: right; height: 20px; clear: right"></div><div style="width: 780px; float: right; height: 20px; clear: right"></div><div style="width: 715px; float: right; height: 20px; clear: right"></div><div style="width: 704px; float: right; height: 20px; clear: right"></div><div style="width: 678px; float: right; height: 20px; clear: right"></div><div style="width: 667px; float: right; height: 20px; clear: right"></div><div style="width: 690px; float: right; height: 20px; clear: right"></div><div style="width: 700px; float: right; height: 20px; clear: right"></div><div style="width: 702px; float: right; height: 20px; clear: right"></div><div style="width: 687px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div>
<div class="ml-4">
<div class="row">
<div class="cell py-0">
<h1 class="mb-0">Diente de León</h1>
</div>
</div>
<div class="row">
<div class="cell py-0">
<h1 class="my-0"><small>Taraxacum officinale</small></h1>
</div>
</div>
<div class="row grid mt-2 ml-4">
<div class="row"><div class="cell py-0"><b>Clase: </b><i>Magnoliopsida</i></div></div>
<div class="row"><div class="cell py-0"><b>Orden: </b><i>Asterales</i></div></div>
<div class="row"><div class="cell py-0"><b>Familia: </b><i>Asteraceae</i></div></div>
<div class="row"><div class="cell py-0"><b>Género: </b><i>Taraxacum</i></div></div>
<div class="row"><div class="cell py-0"><b>Especie: </b><i>Taraxacum officinale</i></div></div>
</div>
<div class="row mt-3">
<p>
<b>Origen, distribución y características:</b><br>
Expedita consectetur optio doloremque quisquam fugiat architecto eum non possimus, inventore id doloremque laboriosam asperiores modi minus commodi nisi excepturi expedita? Vitae quis deserunt itaque ea eos exercitationem, enim aut aliquid obcaecati illum ipsa exercitationem facilis nobis vitae? Corrupti dolorum eos saepe atque reiciendis aliquid minima iste magni et accusamus? Qui delectus autem aspernatur.
Fugiat reprehenderit repellendus ut excepturi ipsa voluptatum quod non aliquid, natus optio tempore similique quos atque exercitationem enim repudiandae nam harum, natus hic ea excepturi quidem nemo, ex numquam obcaecati ipsum, aperiam nostrum beatae. Neque eveniet sequi quos. Aut sit illum molestias ullam ipsa quibusdam eius corrupti cupiditate voluptatem quasi.
Animi vero tempora dolorem perferendis autem harum aspernatur tenetur odit ipsam, amet blanditiis ut eaque esse laborum fuga illo voluptates, dolorem ipsum esse harum tempore cum ad illum earum natus iure obcaecati, dolorum repudiandae commodi quos recusandae quae exercitationem ab expedita, dolorem consectetur ipsum? Beatae accusantium officia illum eveniet tempora repellat laudantium hic iste mollitia. Quas dolorem quisquam expedita saepe quo aliquid repellendus, facere dolor voluptate cupiditate soluta dicta dolorum magnam amet est perferendis harum, esse modi ea magnam quisquam labore, rem eius hic autem, enim molestias optio. Temporibus beatae impedit est optio, non placeat sapiente mollitia ea magnam alias inventore nobis saepe sed, nemo illo quaerat praesentium labore quisquam blanditiis, totam quis perspiciatis doloribus itaque ipsam laudantium nostrum delectus magni, facere vero sequi neque harum?
</p>
</div>
</div>
<img src="/static/img/defaultplant.png " style="float: right;height: 100vh;display: none;" id="imgae">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://rawcdn.githack.com/jasonwyatt/jQSlickWrap/2c0d8fb34807bea9f5e9e45a4f8f04a5238237b0/jquery.slickwrap.js"></script>
<script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
<script>
$(document).ready(function()
$("#imgae").slickWrap();
)
</script>
</body></html>
【问题讨论】：
您的问题是什么？如何修复您的代码？或者您正在寻找替代图书馆？第一个可能会给你一个答案。第二个是off-topic，因此应该关闭。 我正在寻求一种方法来修复我的代码，无论它是否使用我已经在使用的库。可以吗？ 那么请删除您的问题中要求替代库的部分（包括标题）。 【参考方案1】：我认为您需要创建自己的 CSS 并覆盖您从 Metro 获得的内容，看看这个关于 shape-outside 的示例：
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur ligula arcu, ac consequat risus eleifend bibendum. Curabitur vitae pellentesque diam, id interdum ipsum</p>
CSS
P:before
content: "";
float: right;
width: 100px;
height: 5.2em;
shape-outside: polygon(100% 0px, 0.00% 127.97%, 100% 100%);
【讨论】：
以上是关于是否有任何现代方法可以将文本环绕在透明图像周围？的主要内容，如果未能解决你的问题，请参考以下文章