我有一个无法解决的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(请参见代码中的注释):
.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/