文本隐藏在 SVG 后面

Question

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

Answer 1

您不应使用负 1 作为 z-index 值，而应使用正值作为 h1！或者，实际上更好，z-index: -1 (= negative) 用于 SVG 背景图像。

文本隐藏在 SVG 后面

Text is hidden behind SVG

html

css

svg

css-position

background-image