我一直在尝试将其重新创建为网页 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 " alt="" 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>
最佳答案
我认为您需要创建自己的 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%);
}
关于jquery - 有没有现代的方法可以将文本环绕在透明图像周围？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60364694/