Question

我一直试图将其重新创建为网页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(&quot;data:image/png;base64,//Lots of data//&quot;);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>

Answer 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%);
}

有什么现代的方法可以在透明图像周围包裹文字？

1 个答案: