我在 SVG 之后添加了一個 h1 元素,但它沒有顯示在頁面上。我認為 SVG 可能分層在 h1 元素之上,但我使用z-index: -1;了,文本仍然沒有顯示。
代碼:
body {
font-family: Lato, sans-serif;
background-size: 100%;
}
svg {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
h1 {
color: #fff;
z-index: -1 !important;
}
<body>
<svg viewBox="0 0 960 540" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="960" height="540" fill="#1db954"></rect><path d="M0 462L22.8 461.7C45.7 461.3 91.3 460.7 137 457.8C182.7 455 228.3 450 274 444.3C319.7 438.7 365.3 432.3 411.2 439.7C457 447 503 468 548.8 467.7C594.7 467.3 640.3 445.7 686 442.7C731.7 439.7 777.3 455.3 823 458.5C868.7 461.7 914.3 452.3 937.2 447.7L960 443L960 541L937.2 541C914.3 541 868.7 541 823 541C777.3 541 731.7 541 686 541C640.3 541 594.7 541 548.8 541C503 541 457 541 411.2 541C365.3 541 319.7 541 274 541C228.3 541 182.7 541 137 541C91.3 541 45.7 541 22.8 541L0 541Z" fill="#191414" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
<h1>a h1 element</h1>
</body>
我所看到的: https ://i.imgur.com/ukLCifM.png
uj5u.com熱心網友回復:
您不應該使用 MINUS 1 作為z-index值,而應該使用h1! 或者,對于 SVG 背景影像,實際上更好z-index: -1(= 負)。
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/432823.html
上一篇:每隔n秒重復一次的CSS影片
