Safari中的CSS全宽背景图像（负边距）

我有一个CSS问题无法解决

我的wordpress页面有一个全宽部分。它使用负边距来创建全宽（在chrome、safari、edge和firefox中效果很好）

我通过：before和：after添加了背景图像以创建一些波浪：

.waves:before {
content: '';
background-image: url(//lettering.tools/wp-content/themes/ostrichtheme/img/waves.svg);
background-position: center top;
background-size: 100% 70px;
background-repeat: no-repeat;
height: 70px;
position: absolute;
top: -1px;
left: 0;
right: 0;
z-index: -1;
}

它在firefox、chrome和edge中运行良好。但是safari不想全幅查看背景图像，而且在大屏幕上看起来非常难看。我尝试了不同的设置，但无法使其工作。你还有什么想法吗！？我不想消除这种影响(

您可以在此处查看一个实时示例： 全宽部分直接位于第一个文本块之后

谢谢

编辑： 我使用了一组答案来解决这个问题。 但如果我不想要SVG的响应高度呢

另外还出现了另一个问题：边缘中有一条不需要的1px线。 我尝试了负值和transform:translate，但没有成功。 最后我意识到溢出：隐藏在容器上导致1px行-但为什么

---

我建议您使用以下CSS（请参见代码中的注释）：

---

将

.waves:before

和

.waves:after

高度更改为100%，并在

背景大小中移除70px，如下所示：

.waves:before {
    content: '';
    background-image: url(//lettering.tools/wp-content/themes/ostrichtheme/img/waves.svg);
    background-position: center top;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100%;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: -1;
}

然后你可能会有内容在里面远离波浪，所以在那里添加更多的填充

像这样：

.waves .wp-block-group__inner-container {
    padding: 90px 0;
}

Safari和Chrome看起来都一样
谢谢！它是这样工作的。但是波浪的高度会随着浏览器的宽度而变化。有没有办法将高度保持在70px？非常感谢！我优化了css并按照Lumi说的做了。你的方法似乎也行，但是如果我想将高度保持在70px呢？：-）@Timo，若你们保持70px的高度，你们就失去了波浪的纵横比。所以这取决于你的需要和喜好。
.waves:before {
    content: '';
    background-image: url(//lettering.tools/wp-content/themes/ostrichtheme/img/waves.svg);
    background-position: center top;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100%;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: -1;
}

.waves .wp-block-group__inner-container {
    padding: 90px 0;
}