我有一个无法修复的 CSS 问题。
我的 wordpress 页面中有一个全宽部分。它使用负边距来创建全宽(在 chrome、safari、edge 和 firefox 中运行良好)。
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
max-width: 100vw;
width: auto;
我通过 :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 不想全宽查看背景图像,而且在大屏幕上看起来真的很难看。我尝试了不同的设置,但无法正常工作。你还有什么想法吗!?我不想消除这种影响。:(
您可以在此处查看实时示例:https ://lettering.tools/ 全宽部分直接位于第一个文本块之后。
谢谢!
编辑:我使用了答案的组合来解决问题。但是如果我不想要 SVG 的响应高度怎么办?
还出现了另一个问题:Edge 中有一条不需要的 1px 线。我尝试了负底部值并转换:翻译。但它没有用。最后我意识到溢出:隐藏在容器上会导致 1px 线 - 但为什么呢?!