如何將文本（段落元素）放在頁腳上的 svg 元素上。我試過在我的 svg 中使用 z-index:-0 但它不起作用。
我正在為 css 使用 tailwindcss。這是當前輸出的樣子。
<footer>
<div class="mx-auto">
<div class="flex justify-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, qui!</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class=""style="position:absolute; z-index: -1;">
<path fill="#273036" fill-opacity="1" d="M0,224L30,224C60,224,120,224,180,202.7C240,181,300,139,360,122.7C420,107,480,117,540,106.7C600,96,660,64,720,69.3C780,75,840,117,900,144C960,171,1020,181,1080,154.7C1140,128,1200,64,1260,53.3C1320,43,1380,85,1410,106.7L1440,128L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z">
</path>
</svg>
</div>
</footer>
uj5u.com熱心網友回復：
只需添加display: flex到父 div即可輕松實作您要執行的操作（將文本置于 svg 上）。
這是您可以使用的代碼：
<footer>
<div class="mx-auto" style="display: flex">
<div class="flex justify-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, qui!</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class=""style="position:absolute; z-index: -1;">
<path fill="#273036" fill-opacity="1" d="M0,224L30,224C60,224,120,224,180,202.7C240,181,300,139,360,122.7C420,107,480,117,540,106.7C600,96,660,64,720,69.3C780,75,840,117,900,144C960,171,1020,181,1080,154.7C1140,128,1200,64,1260,53.3C1320,43,1380,85,1410,106.7L1440,128L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z">
</path>
</svg>
</div>
</footer><footer>
<div class="mx-auto">
<div class="flex justify-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, qui!</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class=""style="position:absolute; z-index: -1;">
<path fill="#273036" fill-opacity="1" d="M0,224L30,224C60,224,120,224,180,202.7C240,181,300,139,360,122.7C420,107,480,117,540,106.7C600,96,660,64,720,69.3C780,75,840,117,900,144C960,171,1020,181,1080,154.7C1140,128,1200,64,1260,53.3C1320,43,1380,85,1410,106.7L1440,128L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z">
</path>
</svg>
</div>
</footer>
您還可以使 svg 的位置具有粘性，然后根據需要移動文本，但我認為我提供的代碼也可以作業，并且需要的作業更少。
要在移動視圖中獲得清晰的文本外觀，您應該使用鉗位。這是一篇關于在 css 中夾緊的文章：Clamping article
uj5u.com熱心網友回復：
約翰，如果我正確理解您的問題，您是否正在嘗試將文本放在 svg 上，對嗎？
嘗試添加 display: flex; 到您的父 div。
<div class="mx-auto" style="display: flex">
這可能有效
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/323296.html