我有一个无法解决的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的行-但是为什么呢?

css - Safari中的CSS全 Angular 背景图片(负边距)-LMLPHP

最佳答案

我建议您使用以下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)}

关于css - Safari中的CSS全 Angular 背景图片(负边距),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59705640/

10-12 03:31
查看更多