使用 SVG 作为网站特定部分的背景答案

【问题标题】：Using an SVG as a background for a specific portion of a website使用 SVG 作为网站特定部分的背景
【发布时间】：2020-11-09 05:33:21
【问题描述】：

我正在尝试使用 SVG 作为我正在创建的网站上特定部分的背景，但我发现它很难。我遇到的主要问题是 SVG 覆盖了文本，但在图像中，我将链接下方的 SVG 放在文本后面。

这是the image

这是我写的一些没有用的代码。

.icons_and_text {  
  margin-top: 100px;  
  position: relative;  
 }  

.icons_and_text::before {  
  content: '';  
  background-image: url('./images/bg-curvy-desktop.svg');  
  background-size: cover;  
  position: absolute;  
  top: -600px;  
  left: 10;  
  height: 400px;  
  width: 100%;  
 }

我正在寻找可以让我下次自己解决问题的答案，谢谢。

【问题讨论】：

更改类名这种类型的类名不起作用，请将.icons\_and\_text更改为.icons_and_text然后尝试
抱歉类名是对的，看来是复制时出错了。
哥这种类型的课，不图任何风格
我编辑了它，在我的代码中类名是正确的。在将其复制到 StackOverflow 时，它添加了 /
好的！你能在 sn-p 或 codepan 中显示你的代码吗

标签： html css svg frontend

【解决方案1】：

希望对你有用

header .container {
    position: relative;
    z-index: 1;
}

【讨论】：

因为背景很暗，只会让元素完全消失。真的认为 z-index 也可以。它们虽然不是同一种颜色，只是色调略有不同，足以出现。我将在代码笔中发布整个标题代码，以及 svg 链接。
Codepen 链接：codepen.io/carrickkv2/pen/gOMBmWo SVG 链接：drive.google.com/file/d/1w5ZPaiXdspRFwU_BBtEUAgxs-Z-feo2p/…
以上答案有什么问题？
z-index 隐藏元素。不过，我想我有一个解决方案，所以我会粘贴它。

【解决方案2】：

这似乎可行，尽管它不是我想要的。我想要的是一种完美的图像定位方式。

header.header {
    background-color: hsl(217, 28%, 15%);
    background-image: url(../images/bg-curvy-desktop.svg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 23rem;
}

【讨论】：