我嘗試將一些文本放入我的波浪中，getwaves.io 但文本出現在波浪下方。我看過一個使用這些代碼的博客，但它們對我不起作用。
html
<div class="wave-container">
<h1>Hello, world!</h1>
<p>Check out my awesome waves!</p>
<svg>the svg wave</svg>
</div>
我的 css
html {
box-sizing: border-box;
}
body {
margin: 0;
}
.wave-container {
background: #EEE;
}
.wave-container > svg {
display: block;
body {
margin: 0;
font-family: system-ui, sans-serif;
}
.wave-container {
position: relative;
background: #09F;
color: #FFF;
text-align: center;
overflow: hidden;
}
h1 {
font-size: 5rem;
margin: 7rem 1.25rem 2.5rem 1.25rem;
}
p {
font-size: 1.5rem;
margin: 0 1.25rem 5rem 1.25rem;
}
}
有人可以幫忙嗎
uj5u.com熱心網友回復：
如果您只想要 svg 波形上方的文本，您可以做的是：
HTML：
<div class="wave-container">
<div class="text-container">
<h1>Hello, world!</h1>
<p>Check out my awesome waves!</p>
</div>
<svg>the svg wave</svg>
</div>
CSS：
.wave-container{
position: relative;
}
.text-container{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
試試這個，希望這會有所幫助;-)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406945.html
標籤：
上一篇：CSS下劃線沒有突出點擊鏈接