文本隐藏在 SVG 后面答案

【问题标题】：Text is hidden behind SVG文本隐藏在 SVG 后面
【发布时间】：2022-02-15 20:11:24
【问题描述】：

我在 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

【问题讨论】：

标签： html css svg css-position background-image

【解决方案1】：

您不应将 MINUS 1 用作 z-index 值，而应将 h1 用作正值！或者，实际上更好的是，z-index: -1（= 负）用于 SVG 背景图像。

【讨论】：

感谢您的回复。这行得通，我意识到我的错误，我混淆了 z-index 的负值和正值的含义。