0

我有一个无法修复的 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 线 - 但为什么呢?!

在此处输入图像描述

4

2 回答 2

1

我建议您使用以下 CSS(请参阅代码中的注释):

.no-sidebar .entry-content .alignfull
{
    margin: 0 calc(-50vw + 50%); /* simplify calculation, some browsers versions do not support division/multiplication */
    max-width: 100vw;
}

.waves:before, .waves:after /* you can combine selectors */
{
    content: '';
    background: url(//lettering.tools/wp-content/themes/ostrichtheme/img/waves.svg) 0 / cover; /* you can combine background properties */
    height: 5.83vw; /* you want it responsive, right? */
    position: absolute;    
    left: 0;
    right: 0;    
    z-index: -1;
}

.waves:before {top: -1px}
.waves:after {bottom: -1px; transform: rotate(180deg)}
于 2020-01-12T19:35:44.673 回答
0

将高度更改为 100%.waves:before.waves:after删除 70px,background-size如下所示:

.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 中看起来相同

于 2020-01-12T19:40:41.100 回答